使用 jquery submit() 導致函數被多次觸發

Question

我正在用 jQuery 編寫一些表單驗證代碼。 我注意到以下代碼非常奇怪：

var $form = $('#test-form');

$form.on('submit', function(e) {
    e.preventDefault();
    validate();
}); 

function validate() {
    console.log('in');
    $form.submit();
}

我希望將 console.log 取回一次，然后提交表單。 相反，我獲得了大約 700 次控制台日志，但表單沒有提交。 這可以在這個測試中看到：

http://jsfiddle.net/kZMf8/1/

這到底是怎么回事？

Answer 1

使用原生提交繞過 jQuery 事件處理程序：

function validate() {
    console.log('in');
    $form.get(0).submit(); // same as document.getElementById("test-form").submit();
}

Answer 2

您的代碼中有一個無限循環：

var $form = $('#test-form');

$form.on('submit', function(e) {
    e.preventDefault();/*Prevent form validation default event*/
    validate();/*Call the function Validate*/
}); 

function validate() {
    console.log('in');/*Log in the console*/
    $form.submit();/*Call the default submit event of the form which get you back at line 4, this will go on fore ever.*/
}

您應該避免在validate() $form.submit()因為它會導致無限循環。 validate()應該使用驗證返回不重新提交表單的數據。

你可能正在尋找類似的東西：

function AJAXValidation()
{
    var request = $.ajax(
    {
        url: "Process.php",
        type: "POST",
        contentType:"application/x-www-form-urlencoded;charset=UTF-8",
        data:
        {
            /*your data*/
        }
    });

    /*call back fonction which is like your validate() function*/
    request.done(
        function(message)
        {
        /*Do stuff with message*/
        });
}

在此代碼消息中，可以是任何 JSON 字符串、名稱、日期、過程返回。