Q&A
「うまくいかない」等では他者に問題が伝わらないので、具体的に記載してください。
あと、起きてる問題に対して調べたこと試したことを記載してください。
現在、jsでデータがからの場合アラートメッセージをポップアップで表示させたいのですが、うまく表示されません。
どなたかご教授頂けると有り難いです。
宜しくお願い致します。
コード `` contact.js const func1 = () => { if((name.value.length == 0 ) && (kana.value.length == 0 ) && (tel.value.length == 0 ) && (email.value.length == 0 ) && (contact.value.length == 0 )){ alert('氏名は必須入力です。10文字以内で入力してください。\nフリガナは必須入力です。10文字以内で入力してください。\n電話番号は0-9の数字のみで入力してください。\nメールアドレスは正しく入力してください。\nお問い合わせ内容は必須入力です。'); } } contact.php <?php session_start(); $error = []; if ($_SERVER['REQUEST_METHOD'] === 'POST') { $post = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRING); if ($post['name'] === '') { $error['name'] = 'blank'; } if ($post['kana'] === '') { $error['kana'] = 'blank'; } if ($post['tel'] === '') { $error['tel'] = 'blank'; } if ($post['email'] === '') { $error['email'] = 'blank'; } elseif (!filter_var($post['email'], FILTER_VALIDATE_EMAIL)) { $error['email']= 'email'; } if ($post['contact'] === '') { $error['contact'] = 'blank'; } if (count($error) === 0) { $_SESSION['form'] = $post; header('Location: confirm.php'); exit(); } } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>お問い合わせ</title> <link rel="stylesheet" href="contact.css"> </head> <body> <?php include("header.php");?> <div class="contact_box"> <h2>お問い合わせ</h2> <form action="" method="POST" novalidate> <h3>下記の項目をご記入の上送信ボタンを押してください</h3> <p>送信頂いた件につきましては、当社より折り返しご連絡を差し上げます。</p> <p>なお、ご連絡までにお時間頂く場合もございますので予めご了承ください。</p> <p> <span class="required">*</span> は必須項目となります。 </p> <dl> <dt> <label for="name">氏名</label> <span class="required">*</span> </dt> <dd> <input type="text" name="name" id="name" value="<?php echo htmlspecialchars($post['name']); ?>" required autofocus> <?php if ($error['name'] === 'blank') : ?> <p class="error_msg" style="color: red;">名前は必須入力です。10文字以内で入力してください。</p> <?php endif; ?> </dd> </dl> <dl> <dt> <label for="kana">フリガナ</label> <span class="required">*</span> </dt> <dd> <input type="text" name="kana" id="kana" value="<?php echo htmlspecialchars($post['kana']); ?>" required autofocus> <?php if ($error['kana'] === 'blank') : ?> <p class="error_msg" style="color: red;">フリガナは必須入力です。10文字以内で入力してください。</p> <?php endif; ?> </dd> </dl> <dl> <dt> <label for="tel">電話番号</label> <span class="required">*</span> </dt> <dd> <input type="text" name="tel" id="tel" value="<?php echo htmlspecialchars($post['tel']); ?>" required autofocus> <?php if ($error['tel'] === 'blank') : ?> <p class="error_msg" style="color: red;">電話番号は0-9の数字のみでご入力ください。</p> <?php endif; ?> </dd> </dl> <dl> <dt> <label for="email">メールアドレス</label> <span class="required">*</span> </dt> <dd> <input type="email" name="email" id="email" value="<?php echo htmlspecialchars($post['email']); ?>" required autofocus> <?php if ($error['email'] === 'email') : ?> <p class="error_msg" style="color: red;">メールアドレスは正しく入力ください。</p> <?php endif; ?> </dd> </dl> <h3> <label for="contact"> お問い合わせ内容をご記入ください。 <span class="required">*</span> </label> </h3> <dl class="body"> <dd> <textarea name="contact" id="contact" rows="10" required value="<?php echo htmlspecialchars($post['contact']); ?>"></textarea> <?php if ($error['contact'] === 'blank') : ?> <p class="error_msg" style="color: red;">お問い合わせ内容は必須入力です。</p> <?php endif; ?> </dd> <dd> <button type="submit" onclick="func1()">送信</button> </dl> </form> </div> <?php include("footer.php");?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="contact.js"></script> </body> </html>
回答1件
0
ベストアンサー
js
1 if((name.value.length == 0 ) && (kana.value.length == 0 ) && 2 (tel.value.length == 0 ) && (email.value.length == 0 ) && 3 (contact.value.length == 0 )){
この条件は、「nameが空 かつ kanaが空 かつ telが空 かつ emailが空 かつ contact.valueが空 の場合」という意味となります。おそらく「かつ」ではなく「または」としたいのではないでしょうか。
あと、宣言なしで変数 name を使うと window.name が使われてしまうので、document.querySelector('#name').value.length としましょう。
<form> の novalidate を外して rerquired と maxlength=10 を使えばJavaScriptいらないのに、と思いました。
投稿2022/02/08 08:12
編集2022/02/09 00:03
総合スコア20850
ご確認ありがとうございます。
<form> の novalidate を外して rerquired と maxlength=10 を使うというのはどのようにコードを書くのでしょうか？
<form action="" method="POST">
...
<input type="text" name="name" id="name"
value="<?php echo htmlspecialchars($post['name']); ?>" required autofocus maxlength=10>
...
<input type="text" name="kana" id="kana"
value="<?php echo htmlspecialchars($post['kana']); ?>" required maxlength=10>
...
<button type="submit">送信</button>
のような感じです。
<form>の方は実装できました！
ですが、依然としてエラーメッセージのポップアップがでずこちらが苦戦しています。
指摘箇所は修正したのですが、ご教授いただきたいです。
const func1 = () => {
if((name.value.length == 0 ) || (kana.value.length == 0 ) || (tel.value.length == 0 ) || (email.value.length == 0 ) || (contact.value.length == 0 )){
alert('氏名は必須入力です。10文字以内で入力してください。\nフリガナは必須入力です。10文字以内で入力してください。\n電話番号は0-9の数字のみで入力してください。\nメールアドレスは正しく入力してください。\nお問い合わせ内容は必須入力です。');
}
}
ブラウザの開発者ツールのコンソールに何かエラーが出ているんじゃないでしょうか。
name.value.length を document.querySelector('#name').value.length に変えてみてください。
かしこまりました！ありがとうございます。
あなたの回答
tips
プレビュー
