Блог

Я работаю в наследии ASP.NET/MVC проект, который использует немного jQuery для предоставления предупреждения о несохраненных изменениях. Там есть utils.js файл, который включен на каждую страницу, содержащую:

 // Has the user made changes on the form?
var formHasModifications = false;

$(document).ready(function () {

    // We want to trigger the unchanged dialog, if the user has changed any fields and hasn't saved
    $(window).bind('beforeunload', function () {
        if (formHasModifications) {
            return "You haven't saved your changes.";
        }
    });

    // If a field changes, the user has made changes
    $("form:not(.noprompt)").change(function (event) {
        formHasModifications = true;
    });

    // If the form submits, the changes are saved
    $("form:not(.noprompt)").submit(function (event) {
        formHasModifications = false;
    });

    // $(document).ready() may make changes to fields, so we need to clear the flag
    // immediately after it returns
    setTimeout(function() {
        formHasModifications = false;
    }, 1);

});
 

В чем проблема? Событие .submit() срабатывает и перехватывается при каждой отправке, в том числе при отправках, которые фактически не отправляют данные.

То есть, если возникает ошибка проверки, нажатие на кнопку отправки оставляет пользователя на странице с несохраненными изменениями и отображаемыми сообщениями об ошибке проверки, но при этом также снимается флаг formHasModifications.

В результате, если пользователь вносит изменения в один или несколько входных данных, нажимает «отправить», получает ошибки проверки, затем переходит на другую страницу без их исправления и повторной отправки, он не видит диалог несохраненных изменений, даже если у него есть несохраненные изменения.

Это, как я уже сказал, устаревшее приложение, и я не заинтересован в фундаментальных структурных изменениях. Но если есть какой-то способ определить в jQuery, было ли событие отправки успешным или неудачным, я бы очень хотел знать.

Хорошо, как указал Терри, это зависит от того, что мы используем для проверки.

В нашем случае мы используем jquery.validate. И с помощью этого мы можем вызвать .valid() в форме, чтобы определить, прошла ли форма проверку:

 // If the form successfully submits, the changes are saved
$("form:not(.noprompt)").submit(function (event) {
    if ($(this).valid()) {
        formHasModifications = false;
    }
});