JQuery验证和表单提交处理程序之间的交互:坏了,还是我做错了什么?

2g32fytz  于 12个月前  发布在  jQuery
关注(0)|答案(1)|浏览(165)

我的一些表单需要验证,为此我使用了JQuery验证插件。
我的一些表单需要一个自定义的提交处理程序(在提交前有条件地弹出一个确认对话框,与验证无关)。我将处理程序附加到表单上,如下所示:

function confirmHandlerAttach(form, handler) {
  $(form).off("submit", confirmHandlerDefault);
  $(form).on("submit", handler);
}

验证和提交处理程序都是基于类附加在docready上的。独立地,两者都工作良好。问题是,不管验证是否成功,表单的提交处理程序似乎都会被调用。请看一个简单的例子here
这不是我所期望的。我认为验证会阻止提交和提交处理程序的运行。是我做错了什么,还是我的期望错了?
我意识到我可以使用验证的submitHandler属性,如果必要的话,我将使用该方法。但是,由于验证和确认(或任何其他提交处理程序)是真正独立的函数,因此必须更改所有表单提交处理程序来处理JQuery验证插件似乎是一种耻辱,以防某些表单使用验证。

ff29svar

ff29svar1#

$('#myform').validate({ // initialize the plugin
    // your rules,
    submitHandler: function (form) { 
        alert('valid form submitted');
        return false;
    }
});

$("#myform").on('submit', function() {
    alert("Real submit handler");
});

您的jsFiddle:http://jsfiddle.net/sferrari63/VGj2R/
每次单击提交按钮时,submit处理程序都会触发,即使表单是“无效”的。

引用OP

这不是我所期望的。我认为验证会阻止提交和提交处理程序的运行。“是我做错了什么,还是我的期望错了?”**
你在做一些不必要的事情,你的期望是错误的。仅仅因为jQuery Validate插件阻止了默认的提交操作,并不意味着任何外部提交处理程序都不会被触发。
这就是为什么开发人员给你submitHandlerinvalidHandler回调函数的原因。由于插件会自动阻止默认提交,因此这些回调函数取代了您创建自己的submit处理程序的需要。

  • submitHandler仅在表单“有效”时单击提交按钮时触发。
  • invalidHandler仅在表单“invalid”的情况下,在单击submit按钮时触发。

(Note:如果你的提交按钮包含class="cancel",表单将总是评估为“有效”,并且submitHandler将总是触发...所有规则都将被忽略。编辑*:class="cancel"已被弃用,转而支持formnovalidate="formnovalidate"属性。
如果出于某种奇怪的原因,您需要这个额外的submit处理程序,您可以使用.valid()方法测试表单。虽然,我不建议这样做,当你已经有完美的submit处理内置到插件。

$("#myform").on('submit', function() {
    if ($(this).valid()) {
        alert("Form is valid");
    }
});

DEMO:http://jsfiddle.net/VGj2R/1/
由于插件正在处理submit事件,因此在按钮的click处理程序上触发下面的代码会更正确。

$("#mySubmitButton").on('click', function() {
    if ($("#myform").valid()) {
        alert("Form is valid");
    }
});

DEMO:http://jsfiddle.net/VGj2R/2/
但是,除非您的表单没有提交按钮,否则上面的代码是不必要的,可以使用submitHandler回调函数。

相关问题