Jquery 表单验证插件 - 如何通过额外的步骤提交？

Question

我目前正在使用Jquery form validation plugin，当我按照网页上的表单提交说明进行操作时效果很好：

$("#form").validate({
    submitHandler: function(form) {
        form.submit();
    }
});

但是，现在我需要在用户单击提交按钮后添加一个弹出警告框，然后他们需要在提交表单之前单击弹出框上的一个按钮。

所以它必须是：

1. 填写表格，点击提交按钮
2. 弹出框显示一个按钮，单击该按钮
3. 表单提交

我试过了，但是没有反应：

$("#form").validate({
    submitHandler: function(form) { 
        $('.popup').show();
        $('.popup').find('.button').click(function(){
            form.submit();
        });         
     }      
});

Answer 1

发生的情况是，在验证过程中显示弹出对话框，如果验证成功，表单将在用户有机会看到弹出窗口之前提交。

可能有类似的问题JavaScript Submithandler Issue

更理想的是，您需要更改表单，以便在您实际提交表单之前出现对话框。
即

1. 填写表格
2. 单击显示弹出窗口的常规按钮
3. 提交表格

这样您就不会将验证和弹出窗口混在一起。

Answer 2

使用“开启”命令

http://api.jquery.com/on/

您的 DOM 元素是在文档加载后创建或可见的。这将为出现的任何新 DOM 附加一个事件处理程序。

类似：

$('body').on('click','.button',function(){
    form.submit();
});

这是一篇很好的文章，解释了 ON 的作用：

http://www.jquery4u.com/jquery-functions/on-vs-live-review/

Answer 3

感谢您的所有帮助。我最终做的是在表单操作中添加一个参数?submitted=true，所以它仍然是同一个页面，但在 url 中有一个参数。然后检查 url 看是否有这样的参数并相应地执行弹出窗口。不确定它是否愚蠢，但它是我能想到的最简单的方式。

Answer 4

好吧，我猜你真的不再需要这个了。那好吧。无论如何，我会把它发布给后代。

HTML

<form id="form">
    <fieldset>
        <legend>Please provide the following...</legend>
        <p>
            <label for="cname">Name (required, at least 2 characters)</label>
            <input id="cname" name="name" minlength="2" type="text" required />
        </p>
        <p>
            <label for="cemail">E-Mail (required)</label>
            <input id="cemail" type="email" name="email" required />
        </p>
        <p>
            <label for="curl">URL (optional)</label>
            <input id="curl" type="url" name="url" />
        </p>
        <p>
            <label for="ccomment">Your comment (required)</label>
            <textarea id="ccomment" name="comment" required></textarea>
        </p>
        <p><input class="submit" type="submit" value="Submit"/></p>
    </fieldset>
</form>
<div id="Achtung">
    <h1>Achtung!</h1>
    <p>You are about to provide the indicated information. Please be sure!</p>
</div>​

Javascript

(function env($, log) {
    $(function load() {
        var $form = $("#form"),
            form = $form[0],
            $Achtung = $('#Achtung'),
            valid = {submitHandler: Achtung};

        $form.validate(valid);

        function Achtung() {
            var buttons = [
                    {text: "Ok", click: ok},
                    {text: "Cancel", click: close}
                ],
                dialog = {modal: true, buttons: buttons};

            $Achtung.dialog(dialog);

            function ok(event, ui) {
                close(event, ui, "Submit Ok'd and will continue.");
                form.submit();
            }

            function close(event, ui, msg) {
                log(msg || 'Submit canceled by user.');
                $Achtung.dialog("close");
            }
        }

        // Just so the form does not submit; comment these
        // lines to verify it works.
        form.submit = function blocker(event, ui) {
            return !log('The form.submit() was triggered and canceled.');
        };

        fill();
    });

    // Nothing to see here...
    function fill(){
        var $els = $(':input[type!=submit], textarea'),
            d = ['oh', 'a@b.cd', location.href, 'oh'],
            $el;

        $.each(d, function fill(i, v){
            $el = $($els[i]);
            $el.is('input') ? $el.val(v) : $el.text(v);
        });
    }

})(jQuery, function z(){return !console.log.apply(console, arguments)});​

http://jsfiddle.net/userdude/jULBx/