如何使用jquery.dirtyforms？

Question

我对如何使用感到困惑 jquery.dirtyforms。

我正在尝试创建一个带有文本框和提交按钮的简单表单。如果用户修改文本框并尝试刷新页面或在保存结果之前单击页面内的 link，Dirty Forms 插件应该提醒用户。但是没有任何效果。

下面是我的代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">

    $(document).ready(function(){
            $('form').dirtyForms({ 
        dialog: { title: 'Wait!' }, 
        message: 'You forgot to save your details. If you leave now, they will be lost forever.' 
    });
    });

</script>
<form action="/" method="post">
        <input id="input" type="text" />
        <button id="btnSubmit" type="submit" value="Submit">Submit</button>
        </form>

<a href="http://www.google.com">google</a>
</body>
</html>

这段代码有什么问题以及如何使用这个插件？

Answer 1

如果您从 dirtyforms 调用中删除标题和消息，您的代码将正常工作。根据文档：

// Customize the title and message.
// Note that title is not supported by browser dialogs, so you should 
// only set it if you are using a custom dialog or dialog module.
$('form').dirtyForms({ 
    dialog: { title: 'Wait!' }, 
    message: 'You forgot to save your details. If you leave now, they will be lost forever.' 
});

因为您正在尝试使用默认的浏览器对话框，所以这些额外的属性会导致 dirtyform 代码中断。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">

    $(document).ready(function(){
            $('form').dirtyForms();
    });

</script>
<form action="/" method="post">
        <input id="input" type="text" />
        <button id="btnSubmit" type="submit" value="Submit">Submit</button>
        </form>

<a href="http://www.google.com">google</a>
</body>
</html>

Answer 2

虽然@Joffutt 提出了一个可行的解决方案，但他忽略了对这种行为的解释。问题是您在此处设置对话框模块：

dialog: { title: 'Wait!' },

这告诉 Dirty Forms 不要使用 默认浏览器对话框并使用您的自定义对话框模块。但是，您没有完成自定义对话框模块注册的其余部分as per the documentation（即您没有定义打开方法），因此您的配置无效。

如果您不需要自定义对话框模块，则不应在配置中定义 dialog:。

如何使用jquery.dirtyforms？

How to use jquery.dirtyforms?

javascript

jquery

jquery-dirtyforms