###実現したいこと
次のHTMLにあるinputの全てについて、ボタンクリック時に未入力をチェックしたいです。
しかし複数あるinputについてその処理がわかりません。
html
1<section class="jp_section"> 2 <div> 3 <input type="text" id="jp_a" class="jp_a"> 4 <input type="textr" id="jp_b" class="jp_b"> 5 </div> 6</section> 7 8<hr> 9 10<section class="en_section"> 11 12 <div class="en"> 13 <input type="text" id="en_a1" class="en_a"> 14 <div class="part1"> 15 <input type="text" id="en_b1" class="en_b"> 16 <span></span> 17 </div> 18 </div> 19 20 <div class="en"> 21 <input type="text" id="en_a2" class="en_a"> 22 <div class="part2"> 23 <input type="text" id="en_b2" class="en_b"> 24 <span></span> 25 </div> 26 </div> 27 28 <!-- .en の数は不定 --> 29 30</section> 31 32<button type="button">未入力ならメッセージ</button> 33 34<div id="mes"></div> 35 36 37
###試したコード
いちおう考えて下のjQueryを作ってみたのですが、
// en_sectionが未入力かどうか
の部分が上手くいかないようで、いったいどのようにしたら適切なチェックができるでしょうか?
jquery
1$("body").on("click","button",function(){ 2 3 /* 4 jp_sectionの入力状況 5 */ 6 var jp_a = $("#jp_a").val(); 7 var jp_b = $("#jp_b").val(); 8 9 /* 10 どれか1つでも未入力ならアラート 11 */ 12 // jp_sectionが未入力かどうか 13 if( (jp_a == "") || (jp_b == "") ){ 14 $("#mes").html("<p>jp_sectionのどれかが未入力</p>"); 15 } 16 // en_sectionが未入力かどうか 17 else if{ 18 $(".en input").each(function(){ 19 if( $(this).val() == "" ){ 20 $("#mes").html("<p>en_sectionのどれかが未入力</p>"); 21 } 22 }); 23 } 24 // いずれも問題ない場合 25 else{ 26 $("#mes").html("<p>いずれのsetcionも問題なし</p>"); 27 } 28 29}); 30
回答3件
あなたの回答
tips
プレビュー