jQuery Validate 使用 ajax 验证页面上的多个表单答案

【问题标题】：jQuery Validate for multiple forms on a page using ajaxjQuery Validate 使用 ajax 验证页面上的多个表单
【发布时间】：2014-09-02 17:50:30
【问题描述】：

我正在尝试在我的网站上使用 jQuery 验证插件。我需要验证两个单独的表单并使用 ajax 将它们提交到两个不同的 PHP 页面。我是 JavaScript 新手，但对此进行了很多研究，但是我仍然卡住了。

这是我到目前为止所想出的...我如何验证并提交一个表单到processA.php 和第二个表单到processB.php。每个表单都有不同的字段。是否可以添加第二个submitHandler？

$("form").each(function() {
    $(this).validate({
        submitHandler: function(form) {
            $.ajax({
                type    : 'POST',
                url     : 'processA.php',// write code to send mail in mail.php
                data    : $(form).serialize(),
                cache   : false,
                dataType: 'text',
                success : function (serverResponse) { 
                      alert('mail sent successfully.'); 
                },
                error   : function (jqXHR, textStatus, errorThrown) {
                      alert('error sending mail');
                }
            });
            return false; // Temporary
        }
    });
});

【问题讨论】：

请只对内联代码使用反引号，而不是代码块。使用{} 按钮格式化代码块。

标签： jquery ajax forms jquery-validate

【解决方案1】：

不，您不能在 .validate() 方法的一个实例中拥有两个不同的 submitHandler 回调函数。当您在 jQuery .each()... 中调用 .validate() 方法时，您有意将 相同的选项 应用于您的 .each() 所针对的每个 form。

相反，将相应的 URL 放在每个 form 标记的 action 属性中...

<form action="processA.php" ...

<form action="processB.php" ...

使用jQuery's .attr() method从每个action获取正确的URL...

$("form").each(function() {
    $(this).validate({
        submitHandler: function(form) {
            $.ajax({
                ....
                url: $(form).attr('action'), // <- the correct URL for this form
                ....
            });
            return false; // Temporary
        }
    });
});

【讨论】：