動的に追加されたフィールドを検証し、jQueryを使用してフォームの送信を防止する方法は？

Question

私はフォームを持っており、評判の良い/動的なフィールドを持っています。 必要なフィールドが空であればポップアップを表示したいと思います。

これは1人の学生/セクションでのみ動作します。 ここに行くとき：https://jsfiddle.net/riffaz/7nrabcos/「今支払う」ボタンをクリックしてください。 空欄のポップアップが表示され、フォームは送信されません。

+署名ボタンを使用して別の生徒を追加し、2番目の生徒またはセクションを記入せずにフォームを送信すると、そのポップアップが表示されますあまりにも..しかし、それはすぐにフォームを送信すること。..

後に私は考え、なぜ..

jQueryの

jQuery('#payBtn').on('click', function(event) { 
     event.preventDefault(); 
     event.stopPropagation(); 

     var formElement = jQuery(this).parents('form'); 
     formElement.find('input:required').each(function() { 
      var minLength = 1; 
      var value = jQuery(this).val(); 
      var checked = true; 
      if (value.trim().length < minLength) { 
       console.log('length is not ok'); 
       checked = false; 
      } 

      if (!checked) { 
       console.log(jQuery(this).attr('name') + ' is not correctly filled!'); 
       var alertMsg = jQuery(this).attr('name') + ' is not correctly filled!'; 
       alert (alertMsg); 
      } else { 
       console.log('all is ok'); 
       formElement.submit(); 
       //jQuery('#myModal').modal('toggle'); 
      } 
     }); 
    }) 

を持っていないそして、それはWordPress

であります私は、任意のコンソールエラーが表示されていない ... https://jsfiddle.net/1xk9gtvo/が、WordpPressでそれを動作しない..私はとても混乱しています

..

どのように私はこれはWordPress上で動作し得ることができます：0

はこの作品らしいです私のコードで何が問題になっていますか？

Answer 1

私はあなたのコードを実行していませんが、私のところから飛び出したのは、各ループ内でフォームを送信しているということです。言い換えれば、最初に必要な入力とチェックされた入力がフォームの送信をトリガーします。私は、2回目のチェックボックスのポップアップが表示されていると仮定しています。なぜなら、2回目のループの反復が、リクエストされたリクエストに対するレスポンスがブラウザに到達する前に完了したからです。

EDIT： 申し訳ありませんが、私は実際に解決策を提供するのを忘れていました。ループを反復した後、私は（ '入力：必須'）の数を数えません（ '：checked'）。長さを指定し、この数値がゼロの場合にのみフォームを送信します。

Answer 2

あなたが探しているコードです。

jQuery('#payBtn').on('click', function(event){ 
     event.preventDefault(); 
     event.stopPropagation(); 

     var formElement = jQuery(this).parents('form');  

     formElement.find('input:required').each(function(){ 

     //check if current input element is checked and count empty fields 
     var emptyFields = jQuery(this).not(':checked').filter(function() { 
      return jQuery(this).val() === ""; 
     }).length; 

     // call form submit only if emptyFields are zero 
     if (emptyFields === 0) { 
      formElement.submit(); 
     } else { 
      console.log(jQuery(this).attr('name') + ' is not correctly filled!'); 
      return false; 
     } 
     }); 
    });