Q&A
上手くいかないというのはどう上手くいかないのでしょうか。
###実現したいこと
次の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 どれか１つでも未入力ならアラート 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
デバッグでeach内に入っているか、入っているならどういう情報が渡ってきているかはチェックされましたか？
解決して頂きました。不備の多い質問で失礼致しました。いろいろなご指摘をありがとうございます。
回答3件
0
ベストアンサー
うーん、見た感じだと
javascript
1 else if{ 2 $(".en input").each(function(){ 3 if( $(this).val() == "" ){ 4 $("#mes").html("<p>en_sectionのどれかが未入力</p>"); 5 } 6 }); 7 }
ここが… else if (条件) { .. になるべきです。
これではまずなんでもうまくいきませんね！
要件はわかりませんが、とにかく動いてみようとすると下記みたいになります。
javascript
1<script> 2$("body").on("click","button",function(){ 3 4 /* 5 jp_sectionの入力状況 6 */ 7 var jp_a = $("#jp_a").val(); 8 var jp_b = $("#jp_b").val(); 9 10 /* 11 どれか１つでも未入力ならアラート 12 */ 13 // jp_sectionが未入力かどうか 14 if( (jp_a == "") || (jp_b == "") ){ 15 $("#mes").html("<p>jp_sectionのどれかが未入力</p>"); 16 } else if (isEmptyAnyone()) { 17 // en_sectionが未入力かどうか 18 $("#mes").html("<p>en_sectionのどれかが未入力</p>"); 19 } else{ 20 // いずれも問題ない場合 21 $("#mes").html("<p>いずれのsetcionも問題なし</p>"); 22 } 23 24}); 25 26// どれかが空いてるか？ 27function isEmptyAnyone() { 28 var isEmpty = false; // 空いてない前提でfalse 29 $(".en input").each(function(){ 30 if( $(this).val() == "" ){ 31 isEmpty = true; // 空いてるからtrue 32 } 33 }); 34 return isEmpty; 35} 36</script>
こういう感じを望んでたんでしょうかね
ちなみにHTML側に 「textr」となってるのも直しましょう
投稿2018/10/31 09:58
編集2018/10/31 10:00
総合スコア198
0
javascript
1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 document.querySelector('#btn').addEventListener('click',function(e){ 4 document.querySelector('#mes').textContent= 5 ([].filter.call(document.querySelectorAll('[type=text]'),function(x){ 6 return x.value==""; 7 })).length>0?"error!":"OK"; 8 }); 9}); 10</script> 11<section class="jp_section"> 12 <div> 13 <input type="text" id="jp_a" class="jp_a"> 14 <input type="textr" id="jp_b" class="jp_b"> 15 </div> 16</section> 17<hr> 18<section class="en_section"> 19 <div class="en"> 20 <input type="text" id="en_a1" class="en_a"> 21 <div class="part1"> 22 <input type="text" id="en_b1" class="en_b"> 23 <span></span> 24 </div> 25 </div> 26 <div class="en"> 27 <input type="text" id="en_a2" class="en_a"> 28 <div class="part2"> 29 <input type="text" id="en_b2" class="en_b"> 30 <span></span> 31 </div> 32 </div> 33</section> 34<button type="button" id="btn">未入力ならメッセージ</button> 35<div id="mes"></div>
投稿2018/10/31 10:19
総合スコア114835
0
else ifに条件が無いのが問題では？
投稿2018/10/31 09:56
総合スコア69407
あなたの回答
tips
プレビュー
