1

私は ajax を介してフォームをロードしており、新しい .on() を使用して jQuery をロードしていますが、もう一度送信を押す前にプラグインがロードされていないことを確認します。と思う理由がわかりました。送信を押すと、 on() 関数がフォームに検証をロードします。これを修正する方法はありますか？以前は livequery を使用していましたが、jQuery 1.9.1 では機能しないか、少なくとも推奨されません。これが私のコードです：

 $(document)
.on("submit",function(event){
$("#myform").validate();
    event.preventDefault();
  })

このコードは、以前は jQuery 1.4.2 で機能していました

 $("#myform")
.livequery(function(){
$(this).validate():
  })

したがって、フォームは送信されませんが、もう一度送信を押したときにのみエラーが表示されます。

更新: 新しい洞察をありがとうSparky! 私は以前のバージョンの jQuery で livequery に慣れていました。しかし、livequery は要素を常にリッスンしていて、クライアントに CPU 負荷をかけることを理解しています。jsfiddle のあなたのコードは、まさに私が望んでいることです!

では、生成されたフォームで .on() を使用しないでください。代わりに、コールバック内のフォームで validate() を実行します。このコードは機能します (もちろん document.ready 内で):

$("#ask").click(function(){
     //send postdata from inputs, returns form with filled fields (defined with jQuery selectors)
    $.post("include_form.lasso",{zip:zip,custno:custno},function(data){
    // div"skjema" is filled with form with ID  
$("#skjema").html(data);
})
    .done(function() { $("#myform").validate();});
})

ここには示されていませんが、validate() には多くのエクストラがあります。私はこれをテストしていませんが、うまくいくと思います。ここで .post() コードの代わりに .ajax() を使用する方が良いですか? 私がしていることは、リンクがクリックされたときに、2 つのフィールド zip と custno を「include_form.lasso」に送信し、結果を「skjema」DIV に入力することです。これはフォームです - 生成されたフォームに validate() 関数を添付します - デフォルトの送信を防ぐためにフォームに stopPropogation() は必要ありませんか? 最初に検証する必要がありますか？

更新: Sparky からの大きな助けの後、ここで何が機能しますか:コードを共有したかっただけです。動的フォームには、validate() と autocomplete() の 2 つの関数が必要でした。そこで、validate() コードとオートコンプリートを 2 つの関数に入れました。

function pumpemod(){ 
$("#pumpemod").autocomplete({
source: "code/sql2.php?mod=1",
minLength: 3,
delay: 400}); }

function send_validate() { $("#my_dropdown").validate()...}

そのため、.on() コードで関数を呼び出します。ラジオ ボタンをクリックすると、フォームが取得されます。次のようになります。

$(document)
    .on('click','input.montRadio',function(event){
    var pnr = $("#postnr").val();
    var knr = $(this).attr("rel");
   $.post("code/vis_skjema.lasso",{postnr:pnr,kundenr:knr},function(data){
        $("#skjema").html("/images/loading.gif");
        $("#skjema").html(data);
        pumpemod();
        send_validate();
    });

    });

これが他の誰かを助けることを願っています。少なくとも、on() についてよく理解できました。livequery から on() に移行したかったのです。

4

5 に答える 5

2

on()送信を押すと、関数はフォームに検証をロードします。...だから、フォームは送信されませんが、もう一度送信を押したときにのみエラーが表示されます。

あなたは正しいです。submit初めてクリックするまで、プラグインはフォーム上で初期化されません。これはon()、プラグインの初期化関数を単にsubmitイベントにアタッチしているためです。これをどのように行ってもdelegate、bind問題は同じです...最初のクリックの後までプラグインを適切に初期化することはできません。

だから今何が起こるかは、フォームが送信されていないということです

あなたpreventDefault()は通常の送信をブロックしています。これをすべて取り除き.validate()、フォームの HTML を作成した直後に単に呼び出す必要があります。

これを修正する方法はありますか？

でフォームをロードした直後にプラグインを初期化する必要があります (1 回) ajax。これを行うコードはどこにありますか? フォームをロードするのコールバック.validate()関数内に関数を配置してみてください。これは、 の完了時に 1 回実行されます。completeajax.validate()ajax

または、 jQuery.load()を使用する場合...

$('#content').load('form_loader', function() {
    ('#myform').validate(); // initialize plugin after form is loaded
});

コードを見なくても、ajax以下の粗いデモは、この概念をシミュレートするためだけにすぐに作成されました。「テスト」ボタンをクリックしてフォームをロードし、完了時 ajaxに初期化します。.validate()

http://jsfiddle.net/dUmfK/

div最初のクリックの前に、フォームがロードされ、検証の準備ができていることがわかります。

于 2013-03-28T03:18:10.740 に答える
0

似たようなことがありました。これが私がそれを解決した方法です。

私は同じ問題を抱えていました:私の目標:同じクラスで多くのフォームを検証します:

私のphp：

form class="js-validate-itemForm" method="post" action="">
...
form class="js-validate-itemForm" method="post" action="">

私のjs：

$('.js-validate-itemForm').each(function () {
       $(this).validate({
           submitHandler: function (form, event) { 
               doActionOnItemform(form, event);
               return false;
           }
        });
    });
于 2016-02-28T18:10:17.457 に答える
0

on通常のバインドの代わりにデリゲートを作成するには、呼び出しにセレクターを追加する必要があります。

$(document).on("submit", "#myform" function(event){
  $(this).validate();
  event.preventDefault();
});

可能であれば、デリゲートをドキュメント全体よりもフォームに近い要素にバインドします。

于 2013-03-27T23:55:03.957 に答える
0

私のコメントによると

 $(document).ready(function(){
  $("#myform").on("submit",function(){
   $(this).validate();
  return false;
 });
});
于 2013-03-27T23:56:05.197 に答える
0

誤字脱字があると思います..

作業例: http://jsfiddle.net/mFeww/4/

     $(document).ready(function(){
        $("#formID").on("submit",function(event){
            $("#myform").validate();
            event.preventDefault();
      })
});

HTML:

<form id="formID">

</form>
于 2013-03-27T23:53:44.767 に答える