jQuery Validate 使用 onclick 处理程序不起作用？答案

【问题标题】：jQuery Validate using onclick handler not working?jQuery Validate 使用 onclick 处理程序不起作用？
【发布时间】：2016-11-08 20:58:51
【问题描述】：

我想使用 jQuery Validate 来验证一些使用如下锚点 onclick 处理程序的表单字段，但它似乎不起作用？

<input type="text" id="StartDate" name="StartDate">  
<input type="text" id="EndDate" name="EndDate"> 

<a class="btn btn-primary js-add" href="#">Add</a> 




 <script>
   $(document).on('click', '.js-add', function (e) {
       e.preventDefault();

       var validator = $("form").validate({
          rules: {
              StartDate: {
                 required: true
              },
              EndDate: {
                 required: true
              }
          },
          messages: {
              StartDate: "The Start Date is required",
              EndDate: "The End Date is required"
          }

       });

      if (!validator.valid()) {
          console.log("invalid");
          return;
      }

      //  otherwise do stuff but we dont want to submit form
   });

 </script>

我想验证这些字段，如果它们有效，请在处理程序中执行一些其他操作，但我不想提交表单，因为我有另一个用于提交表单的按钮。上面的validator.valid() 函数始终为真。当我提交主按钮时，我不需要验证上述字段，因为它们不是强制性的 - 这只是为了我需要验证上述字段的一些客户端交互。

有什么办法可以达到上述目的吗？

【问题讨论】：

这不行吗？ submitHandler: function(form) { /* do anything except form.submit();*/ }

标签： javascript jquery html forms validation

【解决方案1】：

你的

  if (!validator.valid()) {
      console.log("invalid");
      return;
  }

应该是

  if (!$("form").valid()) {
      console.log("invalid");
      return;
  }

您的主要问题是var validator = $("form").validate({ 函数没有返回布尔值。尝试记录返回值，您将看到返回的对象不是布尔值。

.validate() 不返回布尔值，它设置验证。

要确定<form> 或输入元素是否有效，请调用.valid() 以获取布尔结果。

因此您上面的if (!validator.valid()) 将不起作用，因此它永远不会执行console.log("invalid"); 行。

查看Codepen

【讨论】：

【解决方案2】：

将这些属性添加到输入元素

data-val="true" data-val-required="your error message"

然后在单击锚点时运行此代码

$(this).validate();

你也必须参考jquery.validate.js

【讨论】：