Jquery Validator valid() 函数在提交时不起作用

Question

我们在单个页面应用程序中有多个表单。各个表单都有各自的保存按钮，在该按钮上验证各个表单，如果有效（使用 jquery 验证器 .valid() 方法），则记录保存在工作正常的数据库中。

我们在这里面临的问题是，当在最后提交的最后一个表单中，当我们尝试使用 .valid() 方法验证所有其他表单以进行验证时，无论验证是否错误，它总是返回 true。

$("#submitForm").submit(function(event) {
     $("#educationForm").validate();
     console.log($("#educationForm").valid());

});

即使教育表格无效，这里控制台也给出 true

请帮助我们解决这个问题。

问候， 苏沃吉特

Answer 1

valid() 函数在提交时不起作用

.valid() 方法旨在以编程方式触发验证测试。当您单击“提交”时，插件会自动进行验证测试，因此在“提交”事件上也调用.valid() 是没有意义的。

---

我想你可能误会the basic usage...

$("#submitForm").submit(function(event) {
     $("#educationForm").validate();            // <- INITIALIZES PLUGIN
     console.log($("#educationForm").valid());  // <- TEST VALIDATION
});

• 您将永远不会将.validate() 放在除 DOM 就绪处理程序之外的事件处理程序中。 .validate() 方法是插件的初始化方式。

• 正确初始化后，插件自动捕获提交按钮的点击事件。

通过将其放在 .submit() 处理程序中，您正在干扰插件，该插件已经在尝试捕获完全相同的事件。

改为放在 DOM 就绪事件处理程序中...

$(document).ready(function() {

     $("#educationForm").validate();            // <- INITIALIZES PLUGIN

     console.log($("#educationForm").valid());  // <- TEST VALIDATION

});

工作演示：http://jsfiddle.net/2vugwyfe/

或：http://jsfiddle.net/2vugwyfe/1/

---

验证测试由任何type="submit" 元素自动触发。

如果您需要通过单击另一种类型的元素来触发验证测试，则使用自定义 .click() 处理程序...

$(document).ready(function() {

     $("#educationForm").validate();            // <- INITIALIZES PLUGIN

     $("#button").on('click', function() {
         $("#educationForm").valid();  // <- TEST VALIDATION
     });

});

演示 2：http://jsfiddle.net/pdhvtpdq/

---

编辑：

要检查其他表单是否有效，请使用 submitHandler 选项内的 .valid() 方法。

在此示例中，当“Form A”的submitHandler 触发时，它会在允许提交之前检查“Form B”是否有效。

$(document).ready(function() {

     $("#form_A").validate({              // initialize plugin on Form A
         submitHandler: function(form) {  // fires when Form A is valid
             if($("#form_B").valid()) {   // tests if Form B is valid
                 $(form).submit();        // submit Form A
             }
         }
     });

});