Confirm Navigation Dialog

jquery.preventNavigation.js

(function ($) {

    $.fn.preventNavigation = function () {
        var that = this;

        this.on('change', 'input, select, textarea', function () {
            that.data('field-change', true);
        });

        this.on('submit', function () {
            if (that.valid()) {
                that.data('field-change', false);
            }
        });

        window.addEventListener("beforeunload", function (e) {
            if (that.data('field-change')) {
                var confirmationMessage = "You have unsaved changes. Are you sure you want to leave this page?";

                (e || window.event).returnValue = confirmationMessage;     //Gecko, IE, Firefox, etc.
                return confirmationMessage;                                //Webkit, Safari, Chrome etc.
            }
            
            return;
        });
    };

})(jQuery);