如果選中多個復選框，則在其他方面進行驗證

Question

我有一個包含一系列復選框的表單。 選中另一個復選框后，如果您沒有填寫另一個文本框，則會顯示一個警報。

如果我選中多個復選框，那么它根本無法驗證？

<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>

Answer 1

試試看：更改您的按鈕type="button"並在下面的腳本中調用。

$(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演示