Jquery - 複数のフォームのうち1つのフォームのみを検証する

Question

だから、私は多くのスレッドを閲覧しましたが、関連するクエリを見つけることができませんでした。さて、私はSOに似たウェブアプリケーションを持っています。そこでは質問が尋ねられ、人々は質問に対するコメント/回答の自由を持っています（回答も許可されています）。

特定の質問のAnswersをAPI経由で取得し、それぞれのHTMLを作成してdivに追加します。私のHTMLは以下のようになっています。 -

<div> 
    <p> Some Answer </p> 
    <div class="comments"></div> 
     <form id="form_62" class="comment_form" method="POST" action="URL"> <!--This id is variable--> 
      <textarea rows="3" name="comment"></textarea> 
      <button type="submit">Comment </button> 
     </form> 
    </div> 
</div> 

だから、私はこのようなHTMLをいくつかのdivのDYNAMICALLYに追加します。あなたが見ることができるように、多くの答えがあり、したがって複数のcommentsフォームがあります。

私は以下の通りである、それに対してバリデータを書きました： -

$(function(){ 
    $(document).on('submit', '.comment_form', function(e){ 
     alert(111) 
     form_id = $(this).id 
     e.preventDefault();  
     if($(this).valid()){ 
      $.ajax({ 
       ... 
      }); 
     } 
    }) 

    $(this).validate({ 
     ignore: '', 
     onsubmit : false, 
     rules: { 
      comment: { 
       required: true, 
       minlength: 10 
      } 
     } 
    }); 
}) 

予想通り、この作品はありません。

私の質問は、現在提出されているフォームをどのように検証できますか？

Answer 1

フォームを含むdivが動的に追加された場合、divまたはフォームが動的に追加されたときに、Idに基づいてフォームで検証を適用する関数を作成し、関数を呼び出します。

function applyValidate(id){ 
     $(id).validate({ 
     ignore: '', 
     onsubmit : false, 
     rules: { 
      comment: { 
      required: true, 
      minlength: 10 
      } 
     } 
     }); 
    } 

すべてのフォームが一度にページに読み込まれ、各フォームで検証をバインドする場合は、以下のコードを使用できます。私のコメントでアウトと呼ばれる自分のコードで

$(function(){ 
 
    $(document).on('submit', '.comment_form', function(e){ 
 
    form_id = $(this).id 
 
    e.preventDefault();  
 
    if($(this).valid()){ 
 
     console.log('success') 
 
    } 
 
    }); 
 
\t 
 
    /* If all forms are not dynamically added and rendered at once in page then you have to apply validate on each form otherwise add applyValidate(id) function outside of $(function(){}); and call applyValidate(id) function when form is dynamically added*/ 
 
    
 
    $('.comment_form').each(function() { 
 
    // attach to all form elements on page 
 
    $(this).validate({ 
 
     ignore: '', 
 
     onsubmit : false, 
 
     rules: { 
 
     comment: { 
 
      required: true, 
 
      minlength: 10 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script> 
 

 

 
<div> 
 
    <p> Some Answer </p> 
 
    <div class="comments"></div> 
 
    <form id="form_62" class="comment_form" method="POST" action="URL"> <!--This id is variable--> 
 
    <textarea rows="3" name="comment"></textarea> 
 
\t <button type="submit">Comment </button> 
 
    </form> 
 
</div> 
 

 
<div> 
 
    <p> Some Answer </p> 
 
    <div class="comments"></div> 
 
    <form id="form_63" class="comment_form" method="POST" action="URL"> <!--This id is variable--> 
 
    <textarea rows="3" name="comment"></textarea> 
 
\t <button type="submit">Comment </button> 
 
    </form> 
 
</div> 
 

 
<div> 
 
    <p> Some Answer </p> 
 
    <div class="comments"></div> 
 
    <form id="form_64" class="comment_form" method="POST" action="URL"> <!--This id is variable--> 
 
    <textarea rows="3" name="comment"></textarea> 
 
\t <button type="submit">Comment </button> 
 
    </form> 
 
</div>

Answer 2

問題：

$(function(){ 

    // can NOT use submit handler since the validate plugin is already capturing this event 
    $(document).on('submit', '.comment_form', function(e){ 

     .... 
     // can NOT use 'valid()' before 'validate()' has initialized 
     if($(this).valid()){ 
      .... 
     } 
    }) 

    // $(this) is meaningless here since it's not inside a pending jQuery method being invoked 
    $(this).validate({ 
     .... 
    }); 
}) 

フォームを送信するときは、.validate()を呼び出すことはありません。 .validate()メソッドは、フォームのプラグインを初期化するためにのみ使用され、フォームの検証はコールされません。したがって、ページがロードされると通常は.validate()が呼び出されます。ページがロードされたときにはまだ存在していないフォームを持っているので

、あなただけとすぐダイナミックformがあるよう.validate()を呼ぶだろう提出しない、作成しました。つまり、.validate()メソッドをこのフォームを作成する関数の最後のステップとして呼び出すと、送信ボタンがtype="submit"であるため、validateプラグインは自動的にそれを取得し、submitまたはclickハンドラを検証する必要はありません。

$(function(){ 

    function create_dynamic_form() { 

     // code to dynamically create this form HERE 


     // initialize validation on this new form -> 

     $('#this-new-form-id').validate({ 
      .... 
     }); 

    }); 

}); 

私の例は、新しいフォームを動的に作成する実際のコードを表示していれば、より効率的です。