對多個複選框進行檢查時對其他進行驗證

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 Demo