jQuery提交验证，最后有模式对话框？

Question

我现在有一个表单要验证，假设一切正确，我希望它会弹出一个对话框来确认他们的详细信息，这是我到目前为止的代码示例：

var userConfirmed = false;

$("#dialog").dialog({
    buttons: {
        "Yes": function() {
            userConfirmed = true;
            $("#inputform").submit();
        },
        "No, I'll change them.": function() {
            $(this).dialog("close");
        }
    }
});

// check they've submitted what they need to
$("form").submit(function() {

    // lots of these
    if (something) {
        return false;
    }

    $("#dialog").dialog("open");

    return userConfirmed;

});

初始验证工作正常 - 它检查标准并标记为适当，如果不满足任何标准，它将按照我的意愿显示模态框。到目前为止，一切顺利。

但问题是，当我按下“是”提交表单时，它不会提交，直到您再次按下实际的“提交”按钮，啊！使用 jQuery 提交论坛的任何调用都会失败。

非常欢迎任何建议，谢谢。

Answer 1

对话框打开并不会停止代码的执行。 valToReturn 甚至在设置之前由 $("form").submit() 返回。

你可以这样做：

//Save the default behavior to break any loops
var defaultSubmit = $.extend(true, {}, $("form").submit);

$("form").submit(function(e) {

    var valToReturn = true;

    // lots of these
    if (something) {
        return false;
    }

    // popup the dialog confirmation
    $("#dialog").dialog({
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
                defaultSubmit(); // User confirmed, submit form.
            },
            "Cancel": function() {
                $(this).dialog("close"); // Form already prevented from submitting. Exit quietly.
            }
        }
    });

    $("#dialog").dialog("open");

    return false; // Prevent form from being submitted

});

Answer 2

在某处添加一个标志，说明对话框是否已经出现，并且用户单击“是”。示例：

var userConfirmed = false;
$("form").submit(function(e) {
    if ( userConfirmed ) {
        userConfirmed = false; // Reset it to false
        return true; // No need to validate anything, that was already done last time
    }
    var form = $(this);
    // ...
        "Yes": function() {
            userConfirmed = true; // Confirm that the dialog was shown and the user clicked "Yes"
            $(this).dialog("close");
            form.submit(); // Try again; this time, the validation was already done
        },
    // ...
    return false; // Don't submit; the user haven't confirmed the info on the dialog
});

如果没有该标志，您将处于先有鸡还是先有蛋的境地：提交打开对话框，调用$("form").submit() 的对话框再次打开对话框...

如果您有许多表单并且不想使用“全局”变量，您可以使用data 来达到同样的目的。

更新：jsFiddle 上的实时示例。在 Chrome 和 Firefox 中测试成功（提交后 3 秒会显示空白页）。

Answer 3

一如既往，我建议使用jQuery validate 进行验证，然后代码将如下所示

$("#formid").validate({
    submitHandler: function(form) {
               $("#dialog").dialog({
     buttons: {
         "Ok": function() {
             form.submit();
             $(this).dialog("close");
         },
         "Cancel": function() {
             $(this).dialog("close");
         }
     }
});
    }
});

LIVE DEMO

Answer 4

我会将事件附加到按钮而不是表单。只需将其附加到提交按钮单击即可。然后您可以使用event.preventDefault() 阻止表单提交，直到对话得到确认。在“是”功能中只需输入$('form').submit()。也不用担心这样的返回值。