Question

我目前正在使用Jquery form validation plugin，当我在网页上关注它的表单提交说明时效果很好：

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

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

所以它需要：

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

我试过这个，但没有响应：

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

Answer 1

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

类似的问题可能是JavaScript Submithandler Issue

更理想的情况是，您需要更改表单，以便在您提交表单之前可能会出现对话框即

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

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

Answer 2

使用“on”命令

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以查看是否有这样的param并相应地执行弹出窗口。不确定它是否愚蠢，但它是我能想到的最容易的方式。

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/

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

4 个答案: