Question

我想使用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()函数始终为true。当我提交主按钮时，我不需要验证上述字段，因为它们不是强制性的 - 这只是我需要验证上述字段的一些客户端交互性。

有什么方法可以实现上述目标吗？

Answer 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())无法使用＆amp;因此它永远不会执行console.log("invalid");行。

选中此Codepen

Answer 2

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

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

然后点击你的锚点

运行这段代码

$(this).validate();

您还必须参考jquery.validate.js

jQuery验证使用onclick处理程序不工作？

2 个答案: