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

Posted 2023-03-14

【中文标题】Jquery 表单验证插件 - 如何通过额外的步骤提交？

【英文标题】：Jquery form validation plugin - how to submit with an extra step?

【发布时间】：2012-09-05 00:32:16

【问题描述】：

我目前正在使用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();
        );         
           
);

【问题讨论】：

它是一个调用弹出 div 的变量，但无论如何我更新了代码，抱歉造成混淆。

我认为您可能可以使用namespaced event handlers 来帮助您解决两步走的问题。或多或少，您需要防止submit.validated 在您运行submit.unvalidated 之前 触发。不过，我对 jQuery 验证插件并不是那么精通，所以我必须查看它才能弄清楚。我确实在this answer 的验证期间演示了命名空间，但请注意；有很多事情发生。不过，只需查找 event.value 语法，并尝试遵循它的运行方式。

这是相同的验证小提琴without most of the comments;我认为 cmets 确实有助于解释它，但也使它难以阅读。现在看那个代码，我会做一些不同的事情。所以希望没有什么太双特征的生物表演了。

【参考方案1】：

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

可能有类似的问题javascript Submithandler Issue

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

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

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

【参考方案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/

【参考方案3】：

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

【参考方案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', '[e-mail]', 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/