Question

我有一张表格供用户在电影上提交评论。当错过某个字段时，将显示一个错误警告，要求用户填写必填字段，但是当您多次点击提交按钮时，按下该按钮会多次显示所需的字段警报错误，从而导致很长时间重复错误列表。我该如何防止这种情况发生？我已经尝试禁用提交上的按钮，该按钮有效并显示错误一次但是再次按下该按钮。任何帮助将不胜感激。

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

Answer 1

您需要在验证前停止提交，然后在通过以下内容时提交：

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

    ...

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

Answer 2

为什么不在提交功能开始时清除.error列表？

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

    var error = false;

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

    //...

}

Answer 3

您已禁用该按钮，并在出现任何错误时启用该按钮。

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

防止多个表单提交

3 个答案: