質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

お問い合わせフォームが正常に動きません

maruco2525
maruco2525

総合スコア3

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

0クリップ

426閲覧

投稿2022/04/03 02:28

お問い合わせフォームを作成しており、何箇所か必須項目にしているのですが、
生年月日の入力欄を平成・昭和欄、年、月、日、どれか一つでも空欄だと
「生年月日は必須です。」と表示されるようにしたいのですが、日の欄が空欄でないと
表示されません。また、全て入力してもエラーが出てしまうのですが、
どこを修正したら良いのでしょうか?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 { // 繝。繝シ繝ォ繧「繝峨Ξ繧ケ縺悟�蜉帙&繧後※縺�k蝣エ蜷� $('#mail_blank_err').addClass('disnon'); } if(!$('#email2').val()) { // 繝。繝シ繝ォ繧「繝峨Ξ繧ケ縺檎ゥコ谺��蝣エ蜷� $('#mail2_blank_err').removeClass('disnon'); } else { // 繝。繝シ繝ォ繧「繝峨Ξ繧ケ縺悟�蜉帙&繧後※縺�k蝣エ蜷� $('#mail2_blank_err').addClass('disnon'); } /* 蜈・蜉帙&繧後※縺�※繧ゆク€閾エ縺励※縺�↑縺代l縺ー繧ィ繝ゥ繝シ */ 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\._-]+)+$/)) { // 繝。繝シ繝ォ繧「繝峨Ξ繧ケ蠖「蠑上↓荳榊y縺後≠繧句�エ蜷� 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\._-]+)+$/)) { // 繝。繝シ繝ォ繧「繝峨Ξ繧ケ蠖「蠑上↓荳榊y縺後≠繧句�エ蜷� 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\._-]+)+$/)) { // 繝。繝シ繝ォ繧「繝峨Ξ繧ケ蠖「蠑上↓荳榊y縺後≠繧句�エ蜷� 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\._-]+)+$/)) { // 繝。繝シ繝ォ繧「繝峨Ξ繧ケ蠖「蠑上↓荳榊y縺後≠繧句�エ蜷� 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'); } /* 縺薙%縺セ縺ァ縺ァ縲∝�鬆�岼蜈・蜉帙メ繧ァ繝�け螳御コ� */ /*----------------------------------------------------------------------------------*/ /* 縺薙%縺九i縲√お繝ゥ繝シ縺ョ譛臥┌縺ォ繧医k蛻�イ� */ 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'); } }); });

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。