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

Question

我有一个包含 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;
        }
    });
});

问题是，表单不会等待用户的回答并立即提交。我在这里尝试了这个建议，起初似乎没问题。我将 html 按钮类型替换为 'button' 并将 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' 属性，如果该字段为空，它应该会阻止表单提交。如果用户在确认框中单击“确定”，即使必填字段仍为空，上面的代码也允许提交。

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

Answer 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.");
        }
    });
});

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

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