提出する前にすべての表示フィールドをJqueryでマークする必要があります

Question

フォームに20個のフィールドがあり、それらのうちのいくつかは複数のdivに存在し、いくつかの条件に基づいてdisplay:noneに設定されています。ユーザーが投稿をクリックしたときにチェックを行い、すべての表示フィールドが必要である必要があります。 今、いくつかのチェックボックスのonClickイベントにコードを記述しましたが、効率的なやり方ではないと感じています。必要に応じて、送信ボタンをクリックしてすべての表示フィールドを選択してチェックを実行できる場合。

このケースのガイドは本当にありがとうございます。

Answer 1

（HTMLが提供される前に、テンプレートシステムがこれを行うために）あなたが動的にdiv Sを隠し、表示されない場合、かつてrequiredとしてすべてinput:visibleフィールドをマークするのに十分ですページが読み込まれるとき。あなたが動的に隠し、（ボタンのクリック、チェックボックスなどに応じて、など...）div Sを示している場合

$("input:visible").prop("required", true) 

は、毎回フィールドが非表示または表示され、その行を実行する必要があります。

このスニペットでは、最初のフィールドが表示され、フィールド1が空白のときに送信しようとするとブラウザから警告が表示されます。ただし、2番目のフィールドは非表示になっているため、必要に応じてマークされません。ブラウザは空白のままであると不平を言うことはありません。

希望すると便利です。

// if you dynamically hide/show any fields, 
 
// make sure you re-run this line 
 
$("input:visible").prop("required", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
    <div> 
 
    <input placeholder="Field 1"> 
 
    </div> 
 
    
 
    <div hidden> 
 
    <input placeholder="Field 2"> 
 
    </div> 
 
    
 
    <input type="submit" value="Submit"> 
 
</form>

Answer 2

フィールドを非表示にしたり、フィールドをJavascript形式で表示したりするとします。 JSでアクセスできるHTML5要素は、次のように必須に設定できます。

document.getElementById("someElement").required = true; 

明らかに逆も可能です。

Answer 3

あなたの要件に応じてこのコードを一致させることができます。私はそれらの可視と隠れフィールドは入力の種類だと思います。

$(document).ready(function() { 
 
       $("input:visible").each(function() { 
 
        $(this).prop("required", true); 
 
       }); 
 
       $("#sbt").on("click", function() { 
 
        $('#myForm').find('input').each(function() { 
 
         if ($(this).prop('required') && $("#"+this.id).val()=='') { 
 
          alert('Please fill the required fields'); 
 
          return false; 
 
         } 
 
        }); 
 
        //your submit code goes here 
 
       }); 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" id="myForm" name="myForm"> 
 
      <div id="fD"> 
 
       <input type="text" id="f1" name="f1"> 
 
      </div> 
 
      <div id="sD"> 
 
       <input type="hidden" id="f2" name="f2"> 
 
      </div> 
 
      <div id="tD"> 
 
       <input type="text" id="f3" name="f3"> 
 
      </div> 
 
     </form> 
 
     <button id="sbt">Submit</button>