Q&A
前提・実現したいこと
jQueryのalertでバリデーションをまとめて表示したい。
1つでも引っかかる項目があればalertを表示する。
if文で場合わけし、表示するメッセージを配列に入れ、最後にalertでまとめて表示したい。
全て空欄の状態で送信ボタンをクリックするとalertは表示され、１つでも入力すると表示されない。
該当のソースコード
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>Lesson Sample Site</title> <link rel="stylesheet" type="text/css" href="css/contact.css"> </head> <body id="app"> <header> <div class="top-bar"> <div class="logo"> <a href="cafe.php"> <img src="img/logo.png" alt="cafeロゴ"> </a> </div> <div class="navbar"> <li class="nav"><a href="cafe.php#cafe_area">はじめに</a></li> <li class="nav"><a href="cafe.php#cafe_experience">体験</a></li> <li class ="nav"><a href="contact.php">お問い合わせ</a></li> </div> <div id="sign-in" v-on="click: openModal">サインイン</div> </div> </header> <open-modal v-show="showContent" v-on="click: closeModal"></open-modal> <?php session_start(); $name = ""; $furikana = ""; $tell = ""; $email = ""; $content = ""; $errors = array(); $pattern = "/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/"; if($_SERVER["REQUEST_METHOD"] === "POST"){ $name = $_POST['name']; $furikana = $_POST['furikana']; $tell = $_POST['tell']; $email = $_POST['email']; $content = $_POST['content']; if (empty($name)||mb_strlen($name)>10) { $errors['name'] = "氏名は必須入力です。10文字以内でご入力ください。"; } if (empty($furikana)||mb_strlen($furikana)>10) { $errors['furikana'] = "フリガナは必須入力です。10文字以内でご入力ください。"; } if (!empty($tell)&&preg_match("/^[0-9]+$/", $tell)==0) { $errors['tell'] = "電話番号は0-9の数字のみでご入力ください。"; } if(empty($email)||preg_match($pattern, $email)==0) { $errors['email'] = "メールアドレスは正しくご入力ください。"; } if(empty($content)) { $errors['content'] = "お問い合わせ内容は必須入力です。"; } if(count($errors) == 0){ $_SESSION = $_POST; header('Location:confirm.php'); exit; } } ?> <section> <div class="contact-form"> <h2>お問い合わせ</h2> <form class="form" action="" method="post"> <div id="sub"> <p>下記の項目をご記入の上送信ボタンを押してください</p> </div> <p>送信頂いた件につきましては、当社より折り返しご連絡を差し上げます。</p> <p>なお、ご連絡までに、お時間を頂く場合もございますので予めご了承ください。</p> <p><span>*</span>は必須項目となります。</p> <div class="personal-info"> <div class="label">氏名<span>*</span></div> <?php if (isset($errors['name'])): ?> <p class="error"><?php echo $errors['name']; ?></p> <div class="input-box"> <input id="name" name="name" placeholder="山田太郎" value="<?= $name ?>"> </div> <?php else: ?> <div class="input-box"> <input id="name" name="name" placeholder="山田太郎" value="<?= $name ?>"> </div> <?php endif; ?> <div class="label">フリガナ<span>*</span></div> <?php if (isset($errors['furikana'])): ?> <p class="error"><?php echo $errors['furikana']; ?></p> <div class="input-box"> <input id="furikana" name="furikana" placeholder="ヤマダタロウ" value="<?= $furikana ?>"> </div> <?php else: ?> <div class="input-box"> <input id="furikana" name="furikana" placeholder="ヤマダタロウ" value="<?= $furikana ?>"> </div> <?php endif; ?> <div class="label">電話番号</div> <?php if (isset($errors['tell'])): ?> <p class="error"><?php echo $errors['tell']; ?></p> <div class="input-box"> <input id="tell" name="tell" placeholder="09012345678" value="<?= $tell ?>"> </div> <?php else: ?> <div class="input-box"> <input id="tell" name="tell" placeholder="09012345678" value="<?= $tell ?>"> </div> <?php endif; ?> <div class="label">メールアドレス<span>*</span></div> <?php if (isset($errors['email'])): ?> <p class="error"><?php echo $errors['email']; ?></p> <div class="input-box"> <input id="email" name="email" placeholder="test@test.co.jp" value="<?= $email ?>"> </div> <?php else: ?> <div class="input-box"> <input id="email" name="email" placeholder="test@test.co.jp" value="<?= $email ?>"> </div> <?php endif; ?> <div id="sub"> <p>お問い合わせ内容をご記入ください<span>*</span></p> </div> <?php if (isset($errors['content'])): ?> <div class="text-box"> <p class="error"><?php echo $errors['content']; ?></p> <textarea id="content" name="content"><?= $content ?></textarea> </div> <?php else: ?> <div class="text-box"> <textarea id="content" name="content"><?= $content ?></textarea> </div> <?php endif; ?> </div> <div class="submit"> <button id="btn">送 信</button> </div> </form> </div> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function(){ var num = /^[0-9]+$/; var result = $('#tell').val().match(num); var pattern = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/; var emailResult = $('#email').val().match(pattern); var array = []; $('#btn').on('click', function(){ if($('#name').val().length<1||val().length>10){ array.push('氏名は必須入力です。10文字以内でご入力ください。'); } if($('#furikana').val().length<1||val()>10){ array.push('フリガナは必須入力です。10文字以内でご入力ください。'); } if($('#tell').val() != ''&&result==null){ array.push('電話番号は0-9の数字のみでご入力ください。'); } if($('#email').val().length<1||emailResult==null){ array.push('メールアドレスは正しくご入力ください。'); } if($('#content').val().length<1){ array.push('お問い合わせ内容は必須入力です。'); } alert(array); }); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.5/vue.min.js"></script> <script type="text/javascript" src="js/script.js"></script> <?php include ( dirname(__FILE__) . '/footer.php' ); ?>
試したこと
最後にif文で下記のようにしたがうまくいかない。
if (array.length>1) { alert(array); }
補足情報（FW/ツールのバージョンなど）
alertを#nameの直後に置き、#nameは空欄でその下にある#furikanaや#emailを入力して送信ボタンをクリックしたら#nameのメッセージだけ表示される。
逆に#emailの直後にalertを置き、#emailは空欄で#nameや#furikanaを入力すると、alertは表示されない。
回答1件
0
ベストアンサー
js
1 if($('#name').val().length<1||val().length>10){ 2 ... 3 if($('#furikana').val().length<1||val()>10){
#name か #furikana になにか入力してからボタンを押すと、開発者ツールのコンソールにエラーが出ているのではないでしょうか。$() なしで val() が使われています。
js
1 var array = [];
これはclick()のコールバック関数の中に移動する必要があります。そうしないとクリックしてアラートが表示される条件に合うと、フォームを修正してもアラートが表示され続けることになります。
エラーメッセージが1つ以上あったら表示したいのですから、if (array.length>1) { ではなく if (array.length > 0) { でしょう。
それと、alert()に配列を渡すとデフォルトの配列の文字列化により,区切りの文字列になります。,を改行に変えたい場合はalert(array.join('\n')); です。
投稿2021/03/15 20:53
編集2021/03/15 21:43
総合スコア20884
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/16 14:08