Question

我创建了一个函数，我在其中绑定beforeunload事件，并在页面首次加载时调用它。首先，当我单击“取消”时，beforeunload事件再次触发，验证不起作用。我如何使这项工作？

function closeOrRefreshPageEvents() {
                // This submit event is used ONLY to run the validation when the user clicks "Cancel" to stay on the page
                $("#formUpdateInstallations").submit(function (event) {
                    $.validate({
                        form: '#formUpdateInstallations',
                        validateOnBlur: false, // disable validation when input looses focus
                        errorMessagePosition: 'top',
                        scrollToTopOnError: true, // Set this property to true if you have a long form
                        onError: function () {
                            alert('Validation failed');
                        },
                        onSuccess: function () {
                            alert('The form is valid!');
                        }
                    });
                    event.preventDefault();
                });

                $(window).bind('beforeunload', function () {
                    // Check if at least one Installation has been modified
                    var installationsChanged = false;
                    for (var z = 0; z < arrayOfInstallationsToUpdate.length; z++) {
                        if (arrayOfInstallationsToUpdate[z].modifiedRecord == "true") {
                            installationsChanged = true;
                            break;
                        }
                    }
                    // If any Installation has been changed then we warn the user, if he clicks "Cancel" then we submit the form only to run the Validation rules
                    if (installationsChanged) {
                        setTimeout(function () {
                            setTimeout(function () {
                                $("#formUpdateInstallations").submit();
                            }, 1000);
                        }, 1);

                        return 'You will loose your changes if you continue!';
                    }
                });
            }

Answer 1

实际上我必须将validate块从Submit事件处理程序移动到onbeforeunload事件处理程序中。下面是正确的代码：

function closeOrRefreshPageEvents() {
            // This submit event is used ONLY to run the validation when the user clicks "Cancel" to stay on the page
            $("#formUpdateInstallations").submit(function (event) {
                event.preventDefault();
            });

            $(window).bind('beforeunload', function () {
                // Validate fields when user clicks "Cancel"
                $.validate({
                    form: '#formUpdateInstallations',
                    validateOnBlur: false, // disable validation when input looses focus
                    errorMessagePosition: 'top',
                    scrollToTopOnError: true, // Set this property to true if you have a long form
                    onError: function () {
                        alert('Validation failed');
                        window.onbeforeunload = function () { return false; };
                        window.onbeforeunload = null;
                    },
                    onSuccess: function () {
                        alert('The form is valid!');
                        window.onbeforeunload = function () { return false; };
                        window.onbeforeunload = null;
                    }
                });

                // Check if at least one Installation has been modified
                var installationsChanged = false;
                for (var z = 0; z < arrayOfInstallationsToUpdate.length; z++) {
                    if (arrayOfInstallationsToUpdate[z].modifiedRecord == "true") {
                        installationsChanged = true;
                        break;
                    }
                }
                // If any Installation has been changed then we warn the user, if he clicks "Cancel" then we submit the form only to run the Validation rules
                if (installationsChanged) {
                    setTimeout(function () {
                        setTimeout(function () {
                            window.onbeforeunload = function () { return false; };
                            $("#formUpdateInstallations").submit();
                        }, 500);
                    }, 1);

                    return 'You will loose your changes if you continue!';
                }
            });
        }

验证“取消”字段单击Onbeforeunload事件JQUERY

1 个答案: