必须使用jquery验证插件无法使用jquery复选框

Question

我正在将jquery validate插件用于jquery步骤，需要在第一步中选中此复选框以继续。并且复选框验证不起作用。这是代码

<form class="dropzone" id="mydropzone" enctype="multipart/form-data" action="/" accept-charset="UTF-8" method="post">
  <div>
    <h3>Basic Info</h3>
    <section>
      <h3>Basic Info</h3>
      <label for="name">Name</label><br>
      <input class="required" type="text" value="" name="name" id="name" />

      <label for="email">Email</label><br>
      <input class="required" type="email" value="" name="email" id="email" />

      <label for="terms">
        <input type="checkbox" name="terms" id="terms">
        <span class="check-box-text">terms and conditions</span>
      </label>

    </section>
    <h3>Upload Photo(s)</h3>
    <section>
      <h3>Upload Photo(s)</h3>

      <div id="dropzonePreview" class="dzonebox"><span class="text-center">Drop files here to upload</span></div>
    </section>
  </div>
</form>

这是我正在使用的javascript代码

<script type="text/javascript">
var verticalForm = $("#mydropzone");

verticalForm.validate({
  errorPlacement: function errorPlacement(error, element) { element.after(error); },
  rules: {
    field: {
      required: true,
      email: true
    },
    terms: {
      required : true
    },
    messages:{
      terms: {
        required : "check the checbox"
      }
    }
  }
});

verticalForm.children("div").steps({
  headerTag: "h3",
  bodyTag: "section",
  transitionEffect: "slideLeft",
  stepsOrientation: "vertical",
  onStepChanging: function (event, currentIndex, newIndex){
    verticalForm.validate().settings.ignore = ":disabled,:hidden";

    return verticalForm.valid();
  },
  onFinished: function(event, currentIndex) {
    verticalForm.submit();
  }
});
</script>

请帮助我解决问题

Answer 1

您错误地将messages对象嵌套在rules内部。