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

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

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

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

Q&A

解決済

3回答

2152閲覧

preventdefaultの挙動について

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2019/08/28 07:44

preventdefaultの挙動に関して、解決できない点があり、質問させて貰いました。

<!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="validation.php" 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>

こちらのコードに関しまして、何も入力せずに送信ボタンを押すと、formのactionに指定した先へと遷移してしまいます。

if(!valid){ e.preventdefault(); }

ここの部分でpreventdefault()を記載しているのも関わらず何故遷移してしまうのでしょうか?
こちらの部分に関しまして、原因が分からないため、ご助言頂けましたら幸いです。

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

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

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

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

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

guest

回答3

0

let user_name = this.name.value;ですが、name="name"<input>ではなく、<form>自体のnameを参照してしまっているように思えます。

そうだとしたら、this.name.valueundefinedとなるので、if(user_name == '')の分岐に入らずvalid=trueのまま進んでしまいます。

このようなthis.nameによる<input>の参照やdocument.formsは古い書き方ですので、getElementsByNamequerySelectorなどで取得したほうがいいでしょう。

投稿2019/08/28 08:01

maisumakun

総合スコア145121

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

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

0

ベストアンサー

こんにちは

以下の修正でいかがでしょう?

修正前:

javascript

1e.preventdefault();

修正後:

javascript

1e.preventDefault();

投稿2019/08/28 08:47

jun68ykt

総合スコア9058

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

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

退会済みユーザー

退会済みユーザー

2019/08/28 08:55

ご回答ありがとうございます。 ご指摘頂きました点修正しましたら、解決いたしました。 ただの誤字だった訳なんですね...
jun68ykt

2019/08/28 09:21

どういたしまして。 そういうことはよくあります。 以下、蛇足です。 私は、JavaScript を書くときは、 WebStorm https://www.jetbrains.com/webstorm/ という開発ツールを使っていますが、これのエディタで、ご質問のコードの問題の箇所を修正するとき、 e.prevent まで打つと、以下の画像のように候補が表示されます。 https://git.io/fjxUk さらに、このあと、小文字のまま "d" を打つと以下のように候補が1個になります。 https://git.io/fjxUt この後、リターンキーを押すと、候補にあがっているものが選ばれて、以下のようになります。 https://git.io/fjxU3 初めのうちは、こういったコード補完をしてくれるエディタを使わずに、今回のような打ち間違えでつまづくのもよい経験かとは思いますが、とはいえ、仕事などで限られた時間内にコードを完成させなければならないような状況では、こういったタイポはできるだけ自分が注意を払わなくても避けられるのが望ましいので、いずれ、上記のような補完をしてくれる開発ツールを使ってみるのもよいかもしれません。
退会済みユーザー

退会済みユーザー

2019/08/28 09:51

ありがとうございます。 自分はvscodeを使用しており、実は検索候補は出るのですが、候補がでるまで少し時間がかかってしまうため、自分で書いてしまおうかなと思ったりしてしまうんですよね... ですが、こういった誤字でつまずいてしまうのは、時間のロスになってしまいますし、出来るだけコードの補完機能を使用していこうと思います!
jun68ykt

2019/08/28 10:10

VSCode も便利そうですね。 はい。タイポ防止やインデントを揃えるなどについては、開発ツールの便利機能をなるべく使うようにするといいですね。
guest

0

formのsubmitイベントをとってるからです。
その時点でsubmitは止められません。(冒頭にpreventdefault()置いて確認すると良いです)
通常はボタンのクリックイベントをとって冒頭でpreventdefault()で止め、
送信OKならformのsubmitを実行します。

js

1 document.addEventListener('DOMContentLoaded', function() { 2 document.getElementById('btn').addEventListener('click', function(e) { 3 e.preventDefault(); 4 // if(user_name) 5 6 let valid = true; 7 let form = document.getElementsByClassName('form'); 8 let name_box = document.getElementById('name_box'); 9 let name_err_msg = document.createElement('p'); 10 let age_err_msg = document.createElement('p'); 11 let err_msg = document.getElementsByClassName('err_msg'); 12 let age_box = document.getElementById('age_box'); 13 console.log(err_msg); 14 15 name_err_msg.classList.add('err_msg'); 16 let str_num = ''; 17 18 let user_name = document.forms.input_form.name.value; 19 let user_age = document.forms.input_form.age.value; 20 console.log(user_name); 21 if (user_name == '') { 22 valid = false; 23 name_err_msg.textContent = '名前が入力されていません'; 24 name_box.parentNode.insertBefore(name_err_msg, name_box.parentNode.firstChild); 25 26 } 27 28 if (str_num.match(/[^0-9]/g) 29 // "", " ", " 1", "1a" をはじく。 30 // 単体では,"01" を通してしまう 31 || 32 33 parseInt(str_num, 10) + "" != str_num 34 // "01", "1 " など0付き・スペース付き文字列をはじく。 35 // 単体では,スペースのみの文字列は通してしまう 36 ) { 37 38 valid = false; 39 document.getElementById('age_box').classList.add(('err_box')); 40 name_box.insertAdjacentHTML('afterend', 41 '<p class="err_msg">年齢は数字のみ入力してください</p>'); 42 43 } 44 45 let checked_flag = false; 46 for (let i = 0; i < document.input_form.color.length; i++) { 47 if (document.input_form.color[i].checked) { 48 checked_flag = true; 49 } 50 } 51 52 if (!checked_flag) { 53 valid = false; 54 document.getElementById('color_list').classList.add(('err_box')); 55 age_box.insertAdjacentHTML('afterend', 56 '<p class="err_msg">チェックされていません</p>') 57 } 58 59 if (valid) { 60 document.forms.input_form.submit(); 61 } 62 63 }); 64 }); 65 66

で、送信を止められたとしても前の質問の回答で指摘されているようにバリデーションメッセージ消してないので
メッセージずっと出っ放し+追記され続けるという現象はありますし、
user_ageを何も使ってないとか

結構ボロボロです。
送信云々はあとでいいので、そちらを先にきちんと正規化されては。

投稿2019/08/28 08:01

編集2019/08/28 08:02
m.ts10806

総合スコア80765

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問