jQuery - 在 alertify 收到确认框值之前提交表单（使用 HTML5）答案

【问题标题】：jQuery - Form submits before alertify receives confirm box value (with HTML5)jQuery - 在 alertify 收到确认框值之前提交表单（使用 HTML5）
【发布时间】：2013-08-20 17:39:12
【问题描述】：

我有一个包含 2 个字段的表单，其中一个是必需的。我使用 HTML5 required 属性来检查提交过程中是否填写了该字段。

<form id ='reg' name='reg' action='here.php' method='post'>
    <input type='text' id='name' name='name' placeholder='Name' value='' required="true" />
    <input type='text' id='contactno' name='contactno' placeholder='Contact No' value='' />
    <input type='submit' value='Register' name='register' id='register' /> 
</form>

在表单实际提交之前，我想显示一个确认框（使用 alertify jQuery 插件）来提示用户提交。如果用户单击确定，则应提交表单。否则，它不应该。一旦提交事件触发，我使用此代码检查确认框：

$("#reg").submit(function() 
{
    alertify.confirm("Are you sure you want to commit your reservation?", function (e) 
    {
        if (e) {
            // user clicked "ok"
            alertify.success("You've confirmed your reservation.");
            return true;
        } else {
            // user clicked "cancel"
            alertify.error("You did not confirm your reservation.");
            return false;
        }
    });
});

问题是，表单不等待用户的回答并立即提交。我尝试了here 的建议，一开始似乎还可以。我将 html 按钮类型替换为“按钮”，并将 jquery 代码替换为：

$("#register").click(function() 
{
    alertify.confirm("Are you sure you want to commit your reservation?", function (e) 
    {
        if (e) {
            // user clicked "ok"
            alertify.success("You've confirmed your reservation.");
            $("#reg").submit();
            return true;
        } else {
            // user clicked "cancel"
            alertify.error("You did not confirm your reservation.");
            return false;
        }
    });
});

这个问题是我有一个字段的 required='true' 属性，如果字段为空，这应该会阻止表单提交。如果用户在确认框中单击“确定”，即使必填字段仍为空，上述代码也允许提交。

我想在显示对话框之前先检查该字段是否已填满，然后等待用户的回答，然后再决定是否提交。关于如何让这个工作的任何建议？提前致谢！ :)

【问题讨论】：

标签： jquery html form-submit confirm required

【解决方案1】：

总是阻止提交，然后在点击确定时手动提交表单。

$("#reg").submit(function(event){
    event.preventDefault(); // cancel submit
    alertify.confirm("Are you sure you want to commit your reservation?", function (e) {
        if (e) {
            // user clicked "ok"
            alertify.success("You've confirmed your reservation.");
            $("#reg")[0].submit(); // submit form skipping jQuery bound handler
        } else {
            // user clicked "cancel"
            alertify.error("You did not confirm your reservation.");
        }
    });
});

也改为提交事件而不是单击，因为这实际上是您想要的，否则所需的属性是无用的。

您很少需要在提交按钮上使用点击事件。只需绑定到表单的提交事件。

【讨论】：

非常感谢！正是我需要的。
抱歉，我想解决这个问题……但我试过了，如果按下“确定”按钮，我没有提交表单。我在有和没有[0] 的情况下都试过了，我什至在$("#reg")[0].submit(); 行之后推了另一个event.preventDefault();。其他一切正常，只是不会提交表单并重定向到action="whatever.php" 页面来处理处理。
如果你能制作一个显示问题的小提琴，我会在早上看。
似乎这是必要的基本形式：jsfiddle.net/wf7jhb9j
永远不要将提交按钮命名为“提交”。切勿将任何东西命名为与 domNode 方法或属性相同的名称。

【解决方案2】：

我修改了上面的示例以减少样板。不再需要边界检查覆盖。只需将事件和消息传递给通用的 confirm() 方法。

$(document).ready(function () {

    function confirm(event, msg) {
        var evt = event;
        event.preventDefault();
        alertify.confirm(msg, function (e) {
            if (e) {
                evt.currentTarget.submit();
                return true;
            } else {
                return false;
            }
        });
    }

    $("#deleteApplianceForm").submit(function(event){
        confirm(event, "Are you sure you want to delete this appliance?");
    });
});

【讨论】：