1

私は現在、Jquery フォーム検証プラグインを使用しています。Web ページのフォーム送信の指示に従ったときにうまく機能します。

$("#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

「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/

于 2012-09-12T03:13:16.690 に答える
0

ご協力ありがとうございます。私がやったことは?submitted=true、フォームアクションにパラメータを追加することです。そのため、同じページですが、URLにパラメータが含まれています。次に、URLをチェックして、そのようなパラメータがあるかどうかを確認し、それに応じてポップアップを実行します。ばかげているかどうかはわかりませんが、ATMについて考えるのが最も簡単な方法です。

于 2012-09-12T05:44:05.233 に答える
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

何が起きているかというと、検証中にポップアップ ダイアログ ボックスが表示され、検証が成功した場合、ユーザーがポップアップを表示する前にフォームが送信されます。

おそらく同様の問題があります JavaScript Submithandler Issue

より理想的には、実際にフォームを送信する前にダイアログが表示されるように、フォームを変更する必要があります。
すなわち

  1. フォームに入力
  2. ポップアップを表示する通常のボタンをクリックします
  3. フォームを送信

このようにして、検証とポップアップを混在させません。

于 2012-09-12T02:59:18.837 に答える