個々のクリックイベントハンドラなしで複数フォーム送信を処理する方法

Question

私のmvcアプリケーションに2つのフォームがあります。すべてのフォームが動的に表示されます。 以下は私のコードです。

//form1 
     <form id="form1" action="" method="post" enctype="multipart/form-data"> 
                <input type="text" name="fname1" id="fname1" placeholder="Full Name"> 
                            <input type="email" name="femail1" id="femail1" placeholder="your@email.com"> 
                <input id="send1" type="button" > 
               </form> 

    //form2 

    <form id="form1" action="" method="post" enctype="multipart/form-data"> 
               <input type="text" name="fname1" id="fname1" placeholder="Full Name"> 

               <input type="email" name="femail1" id="femail1" placeholder="your@email.com"> 
               <input id="button2" type="button"> 
              </form> 



//Jquery code 

    $('#button1').click(function(e){ 
      e.preventDefault(); 

      var fname   =$('#fname1').val(); 
      var femail   =$('#femail1').val(); 
      var fphone   =$('#fphone1').val(); 

      var error   =0; 

      $('#fname1,#femail1,#fphone1').css('border', ''); 

      if(fname=='Full Name' || fname==''){ 
       $('#fname1') .css('border','solid 1px red'); 
       error=1; 

      } 

      var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 
      if(femail == 'your@email.com' || !emailPattern.test(femail)) {   
       $('#femail1').css('border','solid 1px red');     
       error = 1; 
      } 


      if(fphone=='____-_____' || fphone==''){ 
       $('#fphone1').css('border','solid 1px red'); 
       error=1; 

      } 



      //do ajax call 


      return false; 



     }); 

//jquery code for button 2 

    $('#button2').click(function(e){ 
      e.preventDefault(); 

      var fname   =$('#fname1').val(); 
      var femail   =$('#femail1').val(); 
      var fphone   =$('#fphone1').val(); 

      var error   =0; 

      $('#fname1,#femail1,#fphone1').css('border', ''); 

      if(fname=='Full Name' || fname==''){ 
       $('#fname1') .css('border','solid 1px red'); 
       error=1; 

      } 

      var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 
      if(femail == 'your@email.com' || !emailPattern.test(femail)) {   
       $('#femail1').css('border','solid 1px red');     
       error = 1; 
      } 


      if(fphone=='____-_____' || fphone==''){ 
       $('#fphone1').css('border','solid 1px red'); 
       error=1; 

      } 



      //do ajax call 


      return false; 



     }); 

私はこれらのフォームが動的にロードされていると言いましたが、上記のようにajaxコールを実行する必要があります。

Answer 1

各ボタンクリックのクリックハンドラ内で実行するコードが同じ場合は、より汎用的なjQueryセレクタを使用してフォームsubmitのワイヤリングを行うことを検討することができます。現在はIdをjQueryセレクタとして使用しています。 IDはドキュメント内で一意である必要があるため、単一の要素に対してのみ動作します。これは、複数のクリックハンドラーを結びつける必要があることを意味します。つまり、各IDごとに1つずつ（つまり、現在行っていることです）

すべてのフォームにhtml 5データ属性を追加し、フォームsubmitイベントを結び付けます。

ここでは、data-ajax-formデータ属性をフォームに追加しています。

<form id="form1" action="someUrl" method="post" data-ajax-form> 

</form> 

これで、ajaxフォームの送信動作を配線するときに、この新しいデータ属性をjQueryセレクタに使用します。イベントを配線するjQueryのonを使用し

$(function() { 

    $(document).on("submit","[data-ajax-form]",function(e) { 

     e.preventDefault(); 

     var $form=$(this); 
     alert("Submitting the form"); 
     var data = $form.serialize(); 
     alert("serialized form : "+data); 

     //Your other common code 

     $.post($form.attr("action"),data).done(function(res) { 

      //do something with the response 
      console.log(res); 
     }); 
    }); 

}); 

は、DOMの現在および将来の要素を動作させるでしょう。ですから、動的に注入された要素にそれを使用する必要があります。ここで私はonメソッドで$(document)を使用しています。より具体的なセレクターを使用することができます。たとえば、あなたは（あなたのフォームを動的に追加されているかに）コンテナのdivのidを使用することができます

$("#yourFormContainerDiv").on("submit","[data-ajax-form]",function(e) { 

}); 

yourFormContainerDivと仮定すると、あなたのページが持つdiv要素のIDであり、これにあなたの動的なフォームが追加されています。

jQuery validateのようなクライアント側検証ライブラリの使用を検討することもできます。 mvcヘルパメソッドは、入力要素のマークアップを、このライブラリが使用する関連する属性（ビューモデルのプロパティ型/データアノテーションに基づいて）でレンダリングします。見てくださいAdding validation

Answer 2

JQueryでイベント委任という機能を探しています。通常、イベントを要素に配線しますが、これは動的要素がある場合に問題になります。

この場合、イベントを親に「委任」し、その子コンテンツを処理させることができます。たとえば、以下のコードには既存の2つのボタンがあり、次に3番目のボタンが動的に追加されます。

私がしたことは、イベントを親divに配線し、イベントの委任のために以下の構文を使用したことです。あなたはそれについてもっと学ぶことができます。https://learn.jquery.com/events/event-delegation/

<script> 
    $(document).ready(function() { 
     // event delegation 
     $(".parent").on("click","button", function() { 
      alert("Post form"); 
     }) 

     // dynamically add 3rd button 
     $(".parent").append("<button>Button 3</button>"); 
    }) 
</script> 

<div class="parent"> 
    <button>Button 1</button> 
    <button>Button 2</button> 
</div>