jQuery提交验证，结尾有模态对话框？ [英] jQuery on submit validation, with modal dialog at the end?

问题描述

我现在有一个表单要验证，假设一切都正确，我想让它弹出一个确认他们的细节的对话框，这里是我迄今为止的代码示例： p>

I have a form at the moment I'd like to validate, and assuming everything is correct, I'd like it to then popup a dialog confirming their details, here's an example of the code I have so far:

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;

});

初始验证工作正常 - 它会根据标准进行检查，并将其标记为适当的，如果没有该标准得到满足，它将按照我的意愿显示模式框。到目前为止，这么好。

The initial validation works fine - it checks against the criteria and flags up as appropiate, and if none of that criteria is met, it'll display the modal box just as I want. So far, so good.

然而，问题是当我按是提交表单，它不提交，直到你按下实际的提交按钮再次，argh！任何使用jQuery提交论坛的调用都将失败。

The problem however is when I press 'yes' to submit the form, it doesn't submit, until you press the actual 'submit' button again, argh! Any call to submit the forum using jQuery fails.

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

Any suggestions would be very welcome, thank you.

推荐答案

在某个地方添加一个标志，告诉对话框是否已经出现，用户点击了。示例：

Add a flag somewhere telling whether or not the dialog already appeared, and the user clicked yes. Example:

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（）再次打开对话框

Without that flag, you'd be in a chicken-and-egg situation: the submit opens the dialog, and the dialog calling $("form").submit() opens the dialog again...

如果您有许多表单，并且不想使用全局var，则可以使用数据来实现相同的目的。

If you have many forms and don't want to use a "global" var, you can use data for the same purpose.

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

Update: live example at jsFiddle. Tested with success in Chrome and Firefox (it will display a blank page 3 seconds after submitting).

这篇关于jQuery提交验证，结尾有模态对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！