JQuery验证与表单提交处理程序之间的交互:损坏，或者我做错了什么?

问题描述

我的某些表单需要验证，为此我使用了JQuery验证插件.

Some of my forms require validation, for which I use the JQuery validation plug-in.

我的某些表单需要自定义的提交处理程序(提交前有条件地弹出确认对话框，与验证无关).我将处理程序附加到表单上，如下所示:

Some of my forms require a custom submit handler (which conditionally pops-up a confirmation dialog before submitting, independent of validation). I attach the handler to the form like so:

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

根据类，验证和提交处理程序都附加在doc就绪的文档上.独立地，两者都能正常工作.问题在于，无论验证是否成功，似乎都在调用表单的提交处理程序.在此处.

Both validation and the submit handler are attached at doc ready based on classes. Independently, both work fine. The problem is that it seems that the form's submit handler being called regardless of whether the validation succeeds. See a simplfied example here.

这不是我期望的.我认为验证会阻止提交和提交处理程序同时运行.我做错了什么，还是我的期望错了?

This isn't what I would expect. I would think that validation would prevent both the submission and the submit handler from running. Am I doing something wrong, or are my expectations wrong?

我意识到我可以改用验证的SubmitHandler属性，如果有必要，我会走这条路线.但是，由于验证和确认(或任何其他提交处理程序)实际上是独立的功能，以防万一某些表单使用验证，不得不更改所有表单提交处理程序以处理JQuery验证插件似乎很可惜.

I realize that I could instead use validation's submitHandler property, and if necessary I'll go that route. But since validation and confirmation (or any other submit handler) are really independent functions, it seems a shame to have to change all form submit handlers to deal with the JQuery validate plug-in just in case some form uses validation.

推荐答案

$('#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/

Your jsFiddle: http://jsfiddle.net/sferrari63/VGj2R/

即使表单为无效"，您的submit处理程序也会在每次单击提交按钮时触发.

Your submit handler is firing every time the submit button is clicked even when the form is "invalid".

引用OP :

您正在做不必要的事情，而您的期望是错误的.仅仅因为jQuery Validate插件阻止了默认的提交操作，并不意味着任何外部的提交处理程序都不会触发.

You're doing something unnecessary and your expectations are wrong. Just because the jQuery Validate plugin is preventing the default submit action, does not mean that any external submit handlers will not fire.

这是开发人员为您提供submitHandler和invalidHandler回调函数的原因.由于该插件会阻止默认的自动提交，因此这些回调取代了您创建自己的submit处理程序的需要.

This is the reason the developer gives you the submitHandler and invalidHandler callback functions. Since the plugin blocks default submit automatically, these callbacks replace the need for you to create submit handler(s) of your own.

仅当/当表单为有效"时，

• submitHandler会在单击提交按钮时触发.

• submitHandler fires on click of the submit button only if/when the form is "valid".

invalidHandler会在单击提交按钮时触发.

invalidHandler fires on click of the submit button only if/when the form is "invalid".

(注意:如果您的提交按钮包含class="cancel"，则该表单将始终评估为有效"，并且submitHandler将始终触发...所有规则都将被忽略. 编辑:自formnovalidate="formnovalidate"属性以来，不推荐使用class="cancel".)

(Note: if your submit button contains class="cancel", the form will always evaluate as "valid" and the submitHandler will always fire... all rules will be ignored. EDIT: class="cancel" has since been deprecated in favor of the formnovalidate="formnovalidate" attribute.)

如果出于某种奇怪的原因而需要此附加的submit处理程序，则可以使用.valid()方法测试表单.虽然，当您已经在插件中内置了非常好的submit处理程序时，我不建议您这样做.

If, for some odd reason, you need this additional submit handler, you can test the form using the .valid() method. Although, I don't recommend doing this when you already have perfectly good submit handlers built into the plugin.

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

演示: http://jsfiddle.net/VGj2R/1/

由于插件正在处理submit事件，因此更正确地在按钮的click处理程序上触发此代码.

Since the plugin is handling the submit event, it would be more correct to fire this code below on the button's click handler instead.

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

演示: http://jsfiddle.net/VGj2R/2/

但是，除非您的表单没有提交按钮，否则上面的代码不是必需的，而可以使用submitHandler回调函数.

However, unless your form does not have a submit button, the code above is unnecessary where the submitHandler callback function can be used instead.

这篇关于JQuery验证与表单提交处理程序之间的交互:损坏，或者我做错了什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！