0

我有一个包含 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 按钮类型替换为“按钮”，并将 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' 属性，如果该字段为空，这应该会阻止表单提交。如果用户在确认框中单击“确定”，即使必填字段仍为空，上述代码也允许提交。

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

4

2 回答 2

5

始终阻止提交，然后在单击确定时手动提交表单。

$("#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.");
        }
    });
});

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

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

于 2013-08-20T17:42:16.780 回答
0

我修改了上面的示例以减少样板。不再需要边界检查覆盖。只需将事件和消息传递给通用的 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?");
    });
});
于 2014-04-10T15:43:59.997 回答