如何解决jquery.dirtyforms搭配SweetAlert v2弹窗离开确认失效问题

问题复现代码 #

页面HTML代码 #

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="index.js?v=3"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>
    <script src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
</head>
<body>
    <form id="aspnetForm" runat="server" method="post">
        <div>
            <h1>Dirty Forms Test Page</h1>
            <input id="input" type="text" runat="server" /><br />
            <br />
            <input id="input2" type="text" runat="server" /><br />
            <br />
            <button id="btnSubmit" type="submit" value="Submit">Submit</button>
            <br /><br />
            <a href="http://www.google.com">google</a>
        </div>
    </form>
</body>
</html>

原有失效的JS逻辑 #

$(document).ready(function () {
    // 默认对话框可正常运行
    // $('form').dirtyForms();

    // SweetAlert2自定义弹窗逻辑：弹窗可弹出，点击离开无响应
    $('form').dirtyForms({
        dialog: {
            open: function (choice, message) {
                choice.bindEnterKey = true;
                choice.staySelector = '.dirty-dialog .dirty-stay,.blockOverlay';
                choice.proceedSelector = '.dirty-dialog .dirty-proceed';

                Swal.fire({
                    title: "Are you sure?",
                    text: message,
                    icon: "question",
                    showCancelButton: true,
                    focusCancel: true,
                    confirmButtonText: 'Leave',
                    cancelButtonColor: '#d33',
                    confirmButtonColor: '#3085d6'
                }).then((result) => {
                    if (result.isConfirmed) {
                        choice.proceed = true;
                        choice.commit();
                    }
                })
            }
        }
    });
});

失效原因 #

• 代码中配置的choice.staySelector、choice.proceedSelector、choice.bindEnterKey是DirtyForms默认内置对话框的配套配置，仅对默认生成的.dirty-dialog结构下的按钮生效，SweetAlert2生成的弹窗按钮完全不匹配这些选择器，会导致框架内部事件监听逻辑异常。
• 原逻辑仅处理了用户点击「离开」的分支，用户点击取消、关闭弹窗时没有触发choice.commit()返回选择结果，会导致表单提交/页面跳转事件一直处于挂起状态。

修复后代码 #

直接替换原有dirtyForms初始化逻辑即可：

$(document).ready(function () {
    $('form').dirtyForms({
        dialog: {
            open: function (choice, message) {
                Swal.fire({
                    title: "Are you sure?",
                    text: message,
                    icon: "question",
                    showCancelButton: true,
                    focusCancel: true,
                    confirmButtonText: 'Leave',
                    cancelButtonColor: '#d33',
                    confirmButtonColor: '#3085d6',
                    allowOutsideClick: false // 可选配置：禁止点击弹窗外部关闭，避免用户误操作
                }).then((result) => {
                    // 根据用户选择设置是否继续跳转/提交
                    choice.proceed = result.isConfirmed;
                    // 提交选择结果，触发后续逻辑
                    choice.commit();
                });
            }
        }
    });
});

效果说明 #

• 修改表单未保存时，点击提交按钮、跳转链接都会正常弹出SweetAlert2确认框
• 点击「Leave」按钮会正常执行表单提交或页面跳转
• 点击取消按钮会关闭弹窗，停留在当前页面，已修改的表单内容不会丢失

内容的提问来源于stack exchange，提问作者Gary Jorgenson