Question

我正在使用jQuery验证器和jQuery 1.8.3。由于某种原因，我的表单被提交两次导致错误。这是代码：

someNameSpace.myValidateFunction = function(){
    $('#myForm').validate({
        submitHandler: function(){
            mySubmitCallBackFunction();
        },
    });
    return false;
};

someNameSpace.myValidateFunction();
$(document).on('click', '#myFormSubmitButton', function(){
    $('#myForm').submit();
});

知道为什么表单提交两次？表单按钮不是输入提交，而是<button>元素（在这种情况下需要）。

Answer 1

您的表单提交两次，因为：

您致电$('#myForm').submit()
单击提交按钮，该按钮也会触发表单事件。注意：如果它在表单中，也会在点击时触发表单事件

因此，我认为您必须在点击方法中添加return false，以防止在您点击提交按钮时提交表单。现在，只有$('#myForm').submit();会提交表单：

someNameSpace.myValidateFunction = function(){
    $('#myForm').validate({
        submitHandler: function(){
            mySubmitCallBackFunction();
        },
    });
    return false;
};

someNameSpace.myValidateFunction();
$(document).on('click', '#myFormSubmitButton', function(){
    $('#myForm').submit();
    return false;
});

我认为你也不需要添加这个：

$(document).on('click', '#myFormSubmitButton', function(){
    $('#myForm').submit();
    return false;
});

当表单被提交时，将自动调用validate方法。

Answer 2

您无需添加以下代码

$(document).on('click', '#myFormSubmitButton', function(){
  $('#myForm').submit();
});

submitHandler代码将自动处理表单提交。

Answer 3

我有同样的问题：我的目标：使用相同的类验证许多表单：

我的php：

form class="js-validate-itemForm" method="post" action="">
...
form class="js-validate-itemForm" method="post" action="">

我的js：

$('.js-validate-itemForm').each(function () {
       $(this).validate({
           submitHandler: function (form, event) { 
               doActionOnItemform(form, event);
               return false;
           }
        });
    });

Answer 4

我从以下原因弄清楚了该代码提交两次的原因：

someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
    submitHandler: function(){
        mySubmitCallBackFunction();
    },
});
    return false;
};

someNameSpace.myValidateFunction();
$(document).on('click', '#myFormSubmitButton', function(){
    $('#myForm').submit();
});

首先，当您单击表单中的按钮时，您将调用$('#myForm').submit()，此呼叫事件将提交一个表单；然后表单事件submitHandler:将调用ajaxsubmit提交另一个表单；因此您将提交两次表格。

第二，老实说，这段代码有错误-^ _ ^-并且不了解jQuery_validate_plugin;

如果您知道$('#myForm').validate将提交一种表格，那么您知道解决方案-您只需删除按钮呼叫事件并让$('#myForm').validate提交表格；这就是代码：

someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
    submitHandler: function(){
        mySubmitCallBackFunction();
    },
});
};

然后完成！

jQuery验证提交表单两次

4 个答案: