1

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

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

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

所以它需要是：

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

我已经尝试过了，但它没有触发响应：

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

4 回答 4

0

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

有一个类似的问题可能是JavaScript Submithandler Issue

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

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

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

于 2012-09-12T02:59:18.837 回答
0

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

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/

于 2012-09-12T12:54:20.800 回答
0

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

于 2012-09-12T05:44:05.233 回答
0

使用“开”命令

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/

于 2012-09-12T03:13:16.690 回答