Q&A
お問い合わせフォームを作成しており、何箇所か必須項目にしているのですが、
生年月日の入力欄を平成・昭和欄、年、月、日、どれか一つでも空欄だと
「生年月日は必須です。」と表示されるようにしたいのですが、日の欄が空欄でないと
表示されません。また、全て入力してもエラーが出てしまうのですが、
どこを修正したら良いのでしょうか？javascript初心者で、見よう見まねでコードを
書いたため教えていただけると助かります。よろしくお願いいたします。
<div class="form_box"> <form action="mailform.php" method="post" name="enter" id="enter"> <input type="hidden" name="mode" value="confirm"> <table class="tblStyle_form"> <tr> <th><span>お名前<span class="hissu">必須</span></span></th> <td class="name_area"> <p id="name_err" class="red disnon"><i class="fa fa-exclamation-triangle"></i>お名前（姓）は必須です。</p> <p id="name_err2" class="red disnon"><i class="fa fa-exclamation-triangle"></i>お名前（名）は必須です。</p> 姓：<input name="name" type="text" class="wid_txt placeholder_txt req_item" id="name" placeholder="" onFocus="cText(this)" onBlur="sText(this)"> 名：<input name="name2" type="text" class="wid_txt placeholder_txt req_item" id="name2" placeholder="" onFocus="cText(this)" onBlur="sText(this)"> </td> </tr> <tr> <th><span>お電話番号<span class="hissu">必須</span></span></th> <td><span> <p id="tel_err" class="red disnon"><i class="fa fa-exclamation-triangle"></i>お電話番号は必須です。</p> <p id="tel_valid_err" class="red disnon"><i class="fa fa-exclamation-triangle"></i>お電話番号の形式に不備があります。</p> <input name="tel" type="tel" class="wid_txt req_item" id="tel" style="ime-mode: inactive;" placeholder="" onFocus="cText(this)" onBlur="sText(this)"> </span></td> </tr> <tr> <th><span>メールアドレス<span class="hissu">必須</span></span></th> <td><span> <div> <p id="mail_blank_err" class="red disnon"><i class="fa fa-exclamation-triangle"></i>メールアドレスは必須です。</p> <p id="mail_valid_err" class="red disnon"><i class="fa fa-exclamation-triangle"></i>メールアドレスの形式に不備があります。</p> <input name="email" type="text" class="wid400 req_item" id="email" style="ime-mode: inactive;" placeholder=""> <p class="mail_txt">確認のためにもう一度ご入力ください。</p> <p id="mail2_blank_err" class="red disnon"><i class="fa fa-exclamation-triangle"></i>メールアドレス（確認）は必須です。</p> <p id="mail2_valid_err" class="red disnon"><i class="fa fa-exclamation-triangle"></i>メールアドレス（確認）の形式に不備があります。</p> <p id="mail_err" class="red disnon"><i class="fa fa-exclamation-triangle"></i>メールアドレスが一致しません。</p> <input name="email2" type="text" class="wid400 req_item" id="email2" style="ime-mode: inactive;" placeholder=""> </div> </span></td> </tr> <tr> <th><span>生年月日<span class="hissu">必須</span></span></th> <td class="birthday_area"> <p id="birthday_err" class="red disnon"><i class="fa fa-exclamation-triangle"></i>生年月日は必須です。</p> <select name="year1" class="req_item" id="year1"> <option value="">-- 選択してください --</option> <option value="昭和">昭和</option> <option value="平成">平成</option> </select> <!--<p id="birthday_err" class="red disnon"><i class="fa fa-exclamation-triangle"></i>生年月日は必須です。</p>--> <input type="text" name="year" class="wid60 req_item" id="year" size="4"> 年 <input type="text" name="month" class="wid50 req_item" id="month" size="2"> 月 <input type="text" name="day" class="wid50 req_item" id="day" size="2"> 日</td> </tr> <tr> <th><span>お問い合わせ内容<span class="hissu">必須</span></span></th> <td id="td_category"> <p id="contents_err" class="red disnon"><i class="fa fa-exclamation-triangle"></i>お問い合わせ内容は必須です。</p> <textarea name="txtarea3" cols="45" rows="5" class="txtarea01 req_item" id="txtarea3" maxlength="400"></textarea> <p>※400文字以内でご入力ください</p> </td> </tr> </table> <div class="submit_btnarea"> <button type="submit" value="入力内容を確認する" class="form_btn" id="submit">入力内容を確認する</button> </div> </form>
$('#submit').click(function() { var err_flg = 0; //繧ｨ繝ｩ繝ｼ蛻､螳夂畑繝輔Λ繧ｰ /* 蠢���input縺ｮ蜈･蜉帙メ繧ｧ繝�け */ $('.req_item').each(function() { if (!$(this).val()) { $(this).addClass('form_err'); err_flg++; } else { $(this).removeClass('form_err'); } }); if (!$('#name').val()) { // 縺雁錐蜑阪′遨ｺ谺��蝣ｴ蜷� $('#name_err').removeClass('disnon'); } else { $('#name_err').addClass('disnon'); } if (!$('#name2').val()) { // 縺雁錐蜑阪′遨ｺ谺��蝣ｴ蜷� $('#name_err2').removeClass('disnon'); } else { $('#name_err2').addClass('disnon'); } //譏ｭ蜥後∝ｹｳ謌舌′遨ｺ谺��縺ｨ縺� if (!$("#Year1").val()) { $('#Year1').addClass('form_err'); $('#birthday_err').removeClass('disnon'); err_flg++; } else { $('#Year1').removeClass('form_err'); $('#birthday_err').addClass('disnon'); } if (!$('#year').val()) { // 蟷ｴ縺檎ｩｺ谺��蝣ｴ蜷� $('#birthday_err').removeClass('disnon'); } else { $('#birthday_err').addClass('disnon'); } if (!$('#month').val()) { // 譛医′遨ｺ谺��蝣ｴ蜷� $('#birthday_err').removeClass('disnon'); } else { $('#birthday_err').addClass('disnon'); } if (!$('#day').val()) { // 譌･縺檎ｩｺ谺��蝣ｴ蜷� $('#birthday_err').removeClass('disnon'); } else { $('#birthday_err').addClass('disnon'); } if (!$('#txtarea3').val()) { // 縺雁撫縺�粋繧上○蜀�ｮｹ縺檎ｩｺ谺��蝣ｴ蜷� $('#contents_err').removeClass('disnon'); } else { $('#contents_err').addClass('disnon'); } if (!$('#tel').val()) { // 髮ｻ隧ｱ逡ｪ蜿ｷ縺ｮ縺ｩ繧後°荳縺､縺ｧ繧らｩｺ谺��蝣ｴ蜷� $('#tel_err').removeClass('disnon'); } else { $('#tel_err').addClass('disnon'); } /* email縺ｮ繝√ぉ繝�け */ if(!$('#email').val()) { // 繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ縺檎ｩｺ谺��蝣ｴ蜷� $('#mail_blank_err').removeClass('disnon'); } else { // 繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ縺悟�蜉帙＆繧後※縺�ｋ蝣ｴ蜷� $('#mail_blank_err').addClass('disnon'); } if(!$('#email2').val()) { // 繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ縺檎ｩｺ谺��蝣ｴ蜷� $('#mail2_blank_err').removeClass('disnon'); } else { // 繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ縺悟�蜉帙＆繧後※縺�ｋ蝣ｴ蜷� $('#mail2_blank_err').addClass('disnon'); } /* 蜈･蜉帙＆繧後※縺�※繧ゆｸ閾ｴ縺励※縺�↑縺代ｌ縺ｰ繧ｨ繝ｩ繝ｼ */ var email = $('#email').val(); var email2 = $('#email2').val(); if(email && email2 && email !== email2) { //繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ縺御ｸ堺ｸ閾ｴ縺ｮ蝣ｴ蜷� err_flg++; $('#email, #email2').addClass('form_err'); $('#mail_err').removeClass('disnon'); /* 繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ蠖｢蠑上�繝√ぉ繝�け */ if(!email.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)) { // 繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ蠖｢蠑上↓荳榊ｙ縺後≠繧句�ｴ蜷� err_flg++; $('#email').addClass('form_err'); $('#mail_valid_err').removeClass('disnon'); } else { $('#email').remove('form_err'); $('#mail_valid_err').addClass('disnon'); } /* 繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ�育｢ｺ隱搾ｼ牙ｽ｢蠑上�繝√ぉ繝�け */ if(!email2.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)) { // 繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ蠖｢蠑上↓荳榊ｙ縺後≠繧句�ｴ蜷� err_flg++; $('#email2').addClass('form_err'); $('#mail2_valid_err').removeClass('disnon'); } else { $('#email2').remove('form_err'); $('#mail2_valid_err').addClass('disnon'); } } else { //繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ荳閾ｴ縺ｮ蝣ｴ蜷� /* 繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ蠖｢蠑上�繝√ぉ繝�け */ if(email && !email.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)) { // 繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ蠖｢蠑上↓荳榊ｙ縺後≠繧句�ｴ蜷� err_flg++; $('#email').addClass('form_err'); $('#mail_valid_err').removeClass('disnon'); } else { $('#email').remove('form_err'); $('#mail_valid_err').addClass('disnon'); } /* 繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ�育｢ｺ隱搾ｼ牙ｽ｢蠑上�繝√ぉ繝�け */ if(email2 && !email2.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)) { // 繝｡繝ｼ繝ｫ繧｢繝峨Ξ繧ｹ蠖｢蠑上↓荳榊ｙ縺後≠繧句�ｴ蜷� err_flg++; $('#email2').addClass('form_err'); $('#mail2_valid_err').removeClass('disnon'); } else { $('#email2').remove('form_err'); $('#mail2_valid_err').addClass('disnon'); } $('#mail_err').addClass('disnon'); } /* 縺薙％縺ｾ縺ｧ縺ｧ縲∝�鬆�岼蜈･蜉帙メ繧ｧ繝�け螳御ｺ� */ /*----------------------------------------------------------------------------------*/ /* 縺薙％縺九ｉ縲√お繝ｩ繝ｼ縺ｮ譛臥┌縺ｫ繧医ｋ蛻�ｲ� */ if (err_flg > 0) { //繧ｨ繝ｩ繝ｼ縺後≠縺｣縺溷�ｴ蜷� //console.log(err_flg); $('#err_msg').removeClass('disnon'); $('html,body').animate({ scrollTop: $('#err_msg').offset().top, }); return false; } else { $('#err_msg').addClass('disnon'); } }); });
回答1件
0
ベストアンサー
ID指定を間違っているのではないでしょうか。
js
1 //譏ｭ蜥後∝ｹｳ謌舌′遨ｺ谺��縺ｨ縺� 2 if (!$("#Year1").val()) { 3 $('#Year1').addClass('form_err'); 4 $('#birthday_err').removeClass('disnon'); 5 err_flg++; 6 } else { 7 $('#Year1').removeClass('form_err'); 8 $('#birthday_err').addClass('disnon'); 9 } 10(略）
ここは「Year1」ではなく、「year1」（先頭小文字）にすべきだと思います。
「日の欄が空欄でないと表示されません」 の理由ですが、
現状は、年号・年・月・日それぞれで独立して空欄かどうかを判定したうえで、毎回同じ#birthday_errにクラスを設定しているため
たとえ年号、年、月のうち一部または全部が空欄であっても、
最後の「日」が空欄でなければ、
if (!$('#day').val()) { // 譌･縺檎ｩｺ谺��蝣ｴ蜷� $('#birthday_err').removeClass('disnon'); } else { $('#birthday_err').addClass('disnon'); }
のelse節で、$('#birthday_err').addClass('disnon'); されてしまうため、エラー表示がなされないのだと思います。
【修正案】
年号・年・月・日それぞれについて空欄かどうか判定し、
空欄が1個以上ある場合は、
$('#birthday_err').removeClass('disnon');、
いずれも空欄でない場合は、
$('#birthday_err').addClass('disnon');
とします。
js
1 let date_err = false; //年号・年・月・日のうち空欄が1個以上あるか 2 ["#year1", "#year", "#month", "#day"].forEach(e => { 3 if (!$(e).val()) { 4 $(e).addClass('form_err'); 5 err_flg++; 6 date_err = true; 7 } else { 8 $(e).removeClass('form_err'); 9 } 10 }); 11 12 if (date_err) 13 $('#birthday_err').removeClass('disnon'); 14 else 15 $('#birthday_err').addClass('disnon'); 16 17/* 下記は削除 18 //譏ｭ蜥後∝ｹｳ謌舌′遨ｺ谺��縺ｨ縺� 19 if (!$("#Year1").val()) { 20 $('#Year1').addClass('form_err'); 21 $('#birthday_err').removeClass('disnon'); 22 err_flg++; 23 } else { 24 $('#Year1').removeClass('form_err'); 25 $('#birthday_err').addClass('disnon'); 26 } 27 28 if (!$('#year').val()) { 29 // 蟷ｴ縺檎ｩｺ谺��蝣ｴ蜷� 30 $('#birthday_err').removeClass('disnon'); 31 } else { 32 $('#birthday_err').addClass('disnon'); 33 } 34 35 if (!$('#month').val()) { 36 // 譛医′遨ｺ谺��蝣ｴ蜷� 37 $('#birthday_err').removeClass('disnon'); 38 } else { 39 $('#birthday_err').addClass('disnon'); 40 } 41 42 if (!$('#day').val()) { 43 // 譌･縺檎ｩｺ谺��蝣ｴ蜷� 44 $('#birthday_err').removeClass('disnon'); 45 } else { 46 $('#birthday_err').addClass('disnon'); 47 } 48 49*/
投稿2022/04/03 03:12
編集2022/04/03 04:35
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/04/03 07:34