CODEWITHSUNDEEP
javascriptjqueryvalidationcheckbox
ShambalaG
ShambalaG

Reputation: 356

Validation on other when more than one checkbox is checked

I have a form that has series of checkboxes. When the other checkbox is selected an alert appears if you don't fill in the other textbox.

If I select more than one checkbox it doesn't validate at all?

<form>
  <div id="form-2" class="pages active" data-page="form-2" style="display: block;">
  <p>Please indicate below the quality issue(s) you were not happy with. Pick as many options as apply. <span class="required">*</span></p>
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="Other, please specify in the box below">
    <input type="text" name="qual-form-other-form-2" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false">
   <button class="next-page" data-page-id="form-2">Next</button>
  </div>
</form>

    <script>
    if (pageCurrent.data('page') == 'form-2') {
      var answer = pageCurrent.find('input[name="qual-form-2[]"]:checked').val();

     if ( (answer == 'Other, please specify in the box below') && ($('input[name="qual-form-other-form-2"]').val().length > 0)) {
       $('input[name="qual-form-other-form-2"]').removeClass('empty');
           return true;
     } else if ( (answer == 'Other, please specify in the box below') && (!$('input[name="qual-form-other-form-2"]').val().length > 0)) {
           alert('Please specify other');
           $('input[name="qual-form-other-form-2"]').addClass('empty');
               return false;
     } else if ( (answer == 'Other, please specify in the box below') && (!$('input[name="qual-form-other-form-2"]').val().length > 0) && ($('input[name="qual-form-2[]').is(":checked"))) {
          alert('Please specify other');
          $('input[name="qual-form-other-form-2"]').addClass('empty');
             return false;
     } else if ($('input[name="qual-form-2[]').is(":checked")) {
             return true;
     } else { 
             alert('Validation errors occurred. Please confirm the fields and submit it again.');
     }

    }
   </script>

Upvotes: 0

Views: 751

Answers (1)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : change your button type="button" and call below script.

$(function(){
    $('.next-page').click(function(){
        var checkCount = $('input[name="qual-form-2[]"]:checked').length;
        //check atleast one checkbox checked
        if(checkCount > 0)
        {
           var checkOther = $('input[name="qual-form-2[]"]:last');
           var checkNotOther = $('input[name="qual-form-2[]"]:checked').not(checkOther);
           //if 'other' and any of the rest is checked show alert
            if(checkNotOther.length > 0 && checkOther.is(':checked'))
           {
               $('input[name="qual-form-other-form-2"]').addClass('empty');
                alert('Please select either "Other" or another checkbox');
           }
           //if other checked and input is empty show alert
            else if(checkOther.is(':checked') && $('input[name="qual-form-other-form-2"]').val() == "")
            {
               $('input[name="qual-form-other-form-2"]').addClass('empty'); 
                alert('Please specify other');
            }
            else
            {
               alert('Validation Succeeded'); 
            }

        }
        else
        {
            alert('Please check atleast one checkbox');
        }
    });
});

JSFiddle Demo

Upvotes: 1

Related Questions