2013-10-18 145 views
0

我有一個表單供用戶提交他們對電影的評論。當有一個字段被遺漏時,會顯示一個錯誤提示,要求用戶填寫必填字段,但是當您多次點擊提交按鈕時,會按下按鈕多次顯示所需的字段提示錯誤,從而導致長時間重複錯誤列表。我如何防止這種情況發生?我已經嘗試禁用提交按鈕上的工作和顯示錯誤一次,但然後按鈕不能再次按下。任何幫助將不勝感激。防止多個表單提交

$('#review_a_film').submit(function (e) { 

    var error = false; 

    // No value for movie_title 
    if ($('#movie_title').val() == "") { 
     $('.error').append("<li>Please enter a title </li>"); 
     error = true; 
    } 

    // No Value for actor 
    if ($('#leading_name').val() == "") { 
     $('.error').append("<li>Please enter the leading actors name </li>"); 
     error = true; 
    } 

    // No value for rating 
    if ($('#rating').val() == null) { 
     $('.error').append("<li> Please enter a rating</li>"); 
     error = true; 
    } 

    //No value for review 
    if ($('#review').val() == "") { 
     $('.error').append("<li>Please enter a review</li>"); 
     error = true; 
    } 

    if (error) { // If error found dont submit. 
     e.preventDefault(); 
    } 
}); // End of .submit function: review_a_film. 

回答

1

爲什麼不只是在提交函數開始時清除.error列表?

$('#review_a_film').submit(function (e) { 

    var error = false; 

    $('.error').empty(); 

    //... 

} 
+0

這很完美Ed Hinchliffe它是如何工作的雖然無法讓我的頭瞭解程序的工作原理? – user1829823

+1

按下表單上的提交按鈕調用提交功能。每次按下時,您都會檢查表單中的錯誤,並在存在錯誤時將相應的消息添加到錯誤列表中。最後,如果出現錯誤,您還可以阻止默認提交操作。在每次點擊清除錯誤標記時,您並未清除添加了「附加」的HTML中的錯誤列表。這多餘的行清空錯誤列表HTML。 –

1

你需要停下來驗證之前提交,然後,如果它的東西,如通過提交:

$('#review_a_film').submit(function (e) { 
    Event.stop(e); 
    var form = Event.element(e); 

    ... 

    if (all is dandy) { form.submit() }; 
}); 
0

你必須禁用按鈕,啓用按鈕,如果有任何錯誤。

$('#review_a_film').submit(function (e) { 
$(this).attr('disabled',true); 

var error = false; 

// No value for movie_title 
if ($('#movie_title').val() == "") { 
    $('.error').append("<li>Please enter a title </li>"); 
    error = true; 
} 

// No Value for actor 
if ($('#leading_name').val() == "") { 
    $('.error').append("<li>Please enter the leading actors name </li>"); 
    error = true; 
} 

// No value for rating 
if ($('#rating').val() == null) { 
    $('.error').append("<li> Please enter a rating</li>"); 
    error = true; 
} 

//No value for review 
if ($('#review').val() == "") { 
    $('.error').append("<li>Please enter a review</li>"); 
    error = true; 
} 

if (error) { // If error found dont submit. 
    e.preventDefault(); 
$(this).attr('disabled',false); 
} 
}); // End of .submit function: review_a_film.