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

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

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

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

Q&A

解決済

1回答

2023閲覧

エラーメッセージの表示がすぐに消えてしまいます

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2019/08/27 09:38

下記コードはバリデーションの処理を記載したコードになります。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .err_msg{ color:red; margin-bottom:0; } #name_box{ margin:0; } .err_box{ margin-top:0; } </style> </head> <body> <h1>お問合せ画面</h1> <h2>お問合せ内容を入力してください</h2> <form method="post" action="" name="input_form" class="form"> <p id="name_box">(必須)名前<input type="text" name="name"></p> <p id="age_box">(必須)年齢<input type="text" size="2" name="age">歳</p> <p id="color_list">好きな色 <label><input type="checkbox" name="color" value="red">赤</label> <label><input type="checkbox" name="color" value="green">緑</label> <label><input type="checkbox" name="color" value="blue">青</label> <label><input type="checkbox" name="color" value="other">それ以外</label> <label><input type="checkbox" name="color" value="nothing">特になし</label> </p> <input type="submit" id="btn" value="送信"> </form> <script> document.addEventListener('DOMContentLoaded',function(){ document.forms.input_form.addEventListener('submit',function(e){ // if(user_name) let valid = true; let form = document.getElementsByClassName('form'); let name_box = document.getElementById('name_box'); let name_err_msg = document.createElement('p'); let age_err_msg = document.createElement('p'); let err_msg = document.getElementsByClassName('err_msg'); let age_box = document.getElementById('age_box'); console.log(err_msg); name_err_msg.classList.add('err_msg'); let str_num = ''; let user_name = this.name.value; let user_age = this.age.value; console.log(user_name); if(user_name == ''){ valid = false; name_err_msg.textContent = '名前が入力されていません'; name_box.parentNode.insertBefore(name_err_msg, name_box.parentNode.firstChild); } if (str_num.match(/[^0-9]/g) // "", " ", " 1", "1a" をはじく。 // 単体では,"01" を通してしまう || parseInt(str_num, 10) + "" != str_num // "01", "1 " など0付き・スペース付き文字列をはじく。 // 単体では,スペースのみの文字列は通してしまう ) { valid = false; document.getElementById('age_box').classList.add(('err_box')); name_box.insertAdjacentHTML('afterend','<p class="err_msg">年齢は数字のみ入力してください</p>'); } let checked_flag = false; for(let i = 0; i < document.input_form.color.length; i++){ if(document.input_form.color[i].checked){ checked_flag = true; } } if(!checked_flag){ valid = false; document.getElementById('color_list').classList.add(('err_box')); age_box.insertAdjacentHTML('afterend','<p class="err_msg">チェックされていません</p>') } if(!valid){ e.preventdefault(); } }); }); </script> </body> </html>

問題点としましては、入力ボックスに何も入力せず送信ボタンを押した際にエラーメッセージが表示されますが、一瞬のみの表示で、すぐに消えてしまいます。
こちらの現象につきまして、理由が分からないため、ご助言頂けましたら幸いです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/08/28 00:16

タグにPHP登録されてるようですけど、PHPを見ているなら「分からない」となる理由が分かりません。
退会済みユーザー

退会済みユーザー

2019/08/28 07:01

ん?JavaScript しか登録してないですよ?
m.ts10806

2019/08/28 07:01

質問者さん自身のことです HTML5 PHP JavaScript
退会済みユーザー

退会済みユーザー

2019/08/28 07:06

あーなるほど。 phpに関してはまだまだ初心者ですね
m.ts10806

2019/08/28 07:08

そのアカウントではPHPの質問したことがないようなので他者には指標がないですが、 submitしたらどうなるか分かってないということですよね。
退会済みユーザー

退会済みユーザー

2019/08/28 07:11

そこの部分はわかっていたのですが、エラーメッセージが直ぐに消えてしまっていたので、あれ?とちょっと混乱してしまっていました!
m.ts10806

2019/08/28 07:12

分かってたら「あれ?」ってなるはずがないので、最初のコメントをしています。
guest

回答1

0

ベストアンサー

こちらの現象につきまして、理由が分からないため、ご助言頂けましたら幸いです。

formでsubmitが実行されたらactionで指定された先に遷移するから。
http://www.htmq.com/html5/form.shtml

質問文のソースではactionの遷移先が""なので、同じページへ遷移している。(要するにリロードしてる)

formのonsubmitでreturn falseとかやってやれば遷移はしなくなるけど、そもそもエラーメッセージがどんどん追記される作りになってるから、たぶん意図した動きにはならんだろうなとは思う。(エラーが解消されてもメッセージが消えるタイミングがなくなる)

何を参考にして実装されているのかわかんないけど、もう一度その手の画面を作る方法をちゃんと調べてみてください。

投稿2019/08/27 14:28

gentaro

総合スコア8949

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/08/28 07:08

なるほど。リロードしていたという訳なんですね
退会済みユーザー

退会済みユーザー

2019/08/28 07:08

ご回答ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問