j查询验证插件，如果复选框被选中，文本区域不能为空

Question

我搜索了SO，有一个类似的问题，但那是asp，但我的代码是纯jquery，而不是asp。

我的用例如下：

我有一个html5表单，带有各种html字段。我正在使用jQuery 3.2.1和jquery验证插件来验证字段。我能够验证所有文本输入，下拉列表，但是在依赖于复选框的文本区域中遇到问题。如果用户在文本区域（称为"描述"）中输入文本（最少 5 个字符），但没有选中 2 个复选框之一（ID 为"usa"），我需要显示错误消息。反之亦然 - 即如果用户选中两个复选框之一（ID 为"usa"），但没有在文本区域（称为"描述"）中输入任何文本（最少 5 个字符），那么还需要显示错误消息。

 <form class="form-horizontal" name="paymentInformation"      id="paymentInformation" action="verifyOrder.cfm" method="post" role="form">
   <div class="form-group">
     <fieldset class="col-sm-12">
  <!-- Row 1 -->
  <div class="row">
    <div class="col-sm-6">
      <label for="booktype" class="col-6 col-form-label">
        Book Type *
      </label>
      <select class="custom-select col-4" id="booktype" name="booktype">
        <option selected value="">Select book type</option>
        <option value="val1">E-BOOK</option>
      </select>
    </div>
    <div class="col-sm-6">
      <label for="id2" class="col-6 col-form-label">
        Number
      </label>
      <input type="form-control" placeholder="Number" type="text" id="id2" name="id2" class="col-10">
    </div>
  </div>
  <!-- /Row 1 -->
  <!-- Row 2 -->
  <div class="row">
    <div class="col-sm-6">
      <label for="firstname" class="col-6 col-form-label">
        First Name *
      </label>
      <input type="form-control" type="text" id="firstname" name="firstname" class="col-12" placeholder="Name">
    </div>
    <div class="col-sm-6">
      <label for="id2" class="col-6 col-form-label">
        Book Name
      </label>
      <input type="form-control" placeholder="Book Name" type="text" id="id3" name="id3" class="col-10">
    </div>
  </div>
  <!-- /Row 2 -->
  <div class="row">
    <div class="col-sm-6">
      <label for="lastname" class="col-6 col-form-label">
        Last Name *
      </label>
      <input type="form-control" type="text" id="lastname" name="lastname" class="col-12" placeholder="Name">
    </div>
  </div>
  <!-- /Row 2 -->
  <label for="description" class="col-10 col-form-label">
    Country description
  </label>
  <textarea id="description" name="description" rows="4" class="form-control txtarea-rounded"></textarea>
  <div class="form-check">
    <label class="col-sm-6">Countries: </label>
    <br />
    <label class="form-check-label col-10">
      <input class="form-check-input col-10" type="checkbox" name="usa" value="Y" id="usa">USA
      <br />
      <input class="form-check-input col-10" type="checkbox" name="uk" value="Y" id="uk"> UK
    </label>
  </div>
</fieldset>
   </div>
   <div class="hideDiv">
     <input type="submit" name=btnSubmit value="PROCEED TO THE NEXT STEP &#xf054;" class="blueButton">
   </div>
 </form>

以下是我的JavaScript：

  var authorlist = [{"AUTHOR":"DONNA       EDWARDS","COUNTRY":"USA","REGION":"MIDWEST"},{"AUTHOR":"EMERALD JONES","COUNTRY":"UK","REGION":"EU"},      {"AUTHOR":"SHAKESPEARE","COUNTRY":"UK","REGION":"EU"}];
  function checkName(){
    var nameIsValid = true;
    var nametocheck = $("#id3").val();
    $.each(authorlist, function(index, val){
//console.log(val.AUTHOR);
      if(val.AUTHOR.toUpperCase() == nametocheck.toUpperCase()){
    //console.log(val.AUTHOR);
    nameIsValid = false;
  return false;
}
    });
    return nameIsValid;
    }
  function checkForm() {
var formIsValid = checkName() && $("#paymentInformation").valid();
    if (formIsValid) {
$(".hideDiv").show();
    } else {
$(".hideDiv").hide();
    }
  }
  $("#booktype").on("change", function() {
    checkForm();
  });
  $("#paymentInformation").on("keyup", function() {
    checkForm();
  });
  // add the rule here
  $.validator.addMethod("valueNotEquals", function(value, element, arg) {
    return arg !== value;
  }, "Value must not equal arg.");
  //add 2nd rule here
  $.validator.addMethod("booknameExists", function(value,element,arg){
  }, "Book name must not pre-exist");
  $.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function(element) {
      $(element).parent().removeClass('has-success').addClass('has-error');
    },
    unhighlight: function(element) {
      $(element).parent().removeClass('has-error').addClass('has-success');
    },
    errorPlacement: function(error, element) {
      if (element.parent('.input-group').length || element.prop('type') ===       'checkbox' || element.prop('type') === 'radio') {
  error.insertAfter(element.parent());
      } else {
  error.insertAfter(element);
      }
    }
  });
  $("#paymentInformation").validate({
    rules: {
      'booktype': {
        valueNotEquals: ""
      },
      'firstname': {
        required: true,
        maxlength: 200
      },
      'lastname': {
        required: true,
        maxlength: 200
      },
      'id3': {
        required: true,
        maxlength: 100,
  booknameExists: false
      }
    },
    messages: {
'booktype': {
  valueNotEquals: "Select a book type.",
},
'firstname': {
  required: "Enter your First Name.",
  maxlength: "Your First Name cannot exceed 200 characters"
},
'lastname': {
  required: "Enter your Last Name.",
  maxlength: "Your Last Name cannot exceed 200 characters"
},
'id3': {
  required: "Book name is required.",
  maxlength: "Book name cannot exceed 200 characters",
  booknameExists: "Book name already exists!"
}
   }
  });

这是整个事情的jsfiddle：https://jsfiddle.net/damon_matt/fsLza6m0/21/

Answer 1

来自官方网站：https://jqueryvalidation.org/validate/

示例：根据需要指定联系人元素和电子邮件地址，后者取决于选中通过电子邮件联系的复选框。

$("#myform").validate({
  rules: {
    contact: {
      required: true,
      email: {
        depends: function(element) {
          return $("#contactform_email").is(":checked");
        }
      }
    }
  }
});

所以在你的情况下是这样的：

rules: {
      'booktype': {
        valueNotEquals: ""
      },
      'firstname': {
        required: true,
        maxlength: 200
      },
      'lastname': {
        required: true,
        maxlength: 200
      },
      'id3': {
        required: true,
        maxlength: 100,
        booknameExists: false
      },
      'description': {
        required: {
            depends: function(element) {
              return $("#usa").is(":checked");
            }
        }
    },