jquery复选框需要使用jquery validate插件不起作用答案

【问题标题】：jquery checkbox required not working using jquery validate pluginjquery复选框需要使用jquery validate插件不起作用
【发布时间】：2020-04-30 10:31:37
【问题描述】：

我正在使用带有 jquery 步骤的 jquery validate 插件，需要在第一步中选中复选框才能继续。并且复选框验证不起作用。这是代码

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

请帮我解决这个问题

【问题讨论】：

标签： jquery jquery-validate jquery-steps

【解决方案1】：

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

rules: {
    field: {
        required: true,
        email: true
    },
    terms: {
        required : true
    },
    messages:{ // <- DO NOT PLACE INSIDE OF RULES
        terms: {
            required : "check the checbox"
        }
    }
}

rules 和 messages 对象是兄弟对象...

rules: {
    field: {
        required: true,
        email: true
    },
    terms: {
        required : true
    }
},
messages:{
    terms: {
        required : "check the checbox"
    }
}

附带说明，您的验证规则非常多余。

使用 class="required" 或 required="required" 内联属性...

或在rules 中使用terms: { required: true }

验证插件将自动接受这三种规则技术中的任何一种。

否则，您的复选框验证工作正常：jsfiddle.net/6wzoy2x7/

【讨论】：