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

Question

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

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

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

});

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

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

问候， 苏沃吉特

Answer 1

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

该.valid()方法旨在以编程方式触发验证测试。当您单击“提交”时，插件会自动执行验证测试，因此没有必要调用.valid()“提交”事件。

我认为您可能误解了基本用法......

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

• 除了 DOM 就绪处理程序之外， 您永远不会将其放入事件处理程序中。该方法是插件的初始化方式。.validate().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/

编辑：

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

在此示例中，当submitHandler“表单 A”触发时，它会在允许提交之前检查“表单 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
             }
         }
     });

});