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

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

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

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

Q&A

解決済

1回答

378閲覧

javasprictでアラートによる、メールアドレスの正規チェックをしたいです。

ghtew2

総合スコア245

JavaScript

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

0グッド

0クリップ

投稿2022/04/28 10:12

編集2022/04/28 20:47

入力フォームで、ボタンを押すとメールアドレス入力欄にアドレスの正規チェックのアラートを出すようにしたいですが上手くいきません。この提示コードはフォームが空の場合にボタンを押すと、javasprictアラートのエラーが出るようになっています。

試したこと
reqired
フォームのHTMLに追加する方法。

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"

これで、確かにチェックできるのですが、ボタンが下に遠くに離れている場合、エラーが分かりにくいので、ボツ。

次に
javasprictタグ内にある
以下のコードを追加 下の★①の部分に追加
const reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/;

これを★②の部分に追加
else if(!reg.test(email.value)){
msg +=("メールアドレスの形式が不正です。");

これで、ボタンをクリック時に他のフォームの空白のアラートと同時に不正チェックのアラートが表示されると思ったのですが、表示されないです。

どこが間違っているでしょうか?

html

1<!DOCTYPE html> 2 3<html lang="ja"> 4 5<head> 6 <meta content="text/html; charset=utf-8" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 9 10 <title></title> 11 12 <style> 13 14</style> 15 16</head> 17<body> 18 19 20<form action="" method="post" id="form"> 21 22 <p class="tel-titile"> 23 名前:※ 24 </p> 25 <input type="text" class="name" name="name" id="name" value="" /> 26 27 28 <p class="tel-titile"> 29 フリガナ:※ 30 </p> 31 <input type="text" class="furigana" name="furigana" id="furigana" 32 value="" /> 33 <p class="tel-titile"> 34 メールアドレス:※ 35 </p> 36 37 <input type="text" class="email" name="email" id="email" 38 value=""/> 39 40 <button type="submit" id="submit" name="submit" class="auto-style40" value="submit"> 41 </button> 42 43</form> 44 45 46 47<script> 48// ★①javaでエラーメッセージの表示 49const key = 'date_key'; 50const form = document.querySelector('#form'); 51 52 53 const name = document.querySelector('#name'); 54 const furigana = document.querySelector('#furigana'); 55 const email = document.querySelector('#email'); 56const reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/; 57 58 form.addEventListener('submit', function(event) { 59let msg = ""; 60 61 62 63if (name.value == "") msg += "名前が入力されていません。\n"; 64if (furigana.value == "") msg += "フリガナが入力されていません。\n"; 65if (email.value == "") msg += "メールアドレスが入力されていません。\n"; 66 67// ★② 68else if(!reg.test(email.value)){ 69 msg +=("メールアドレスの形式が不正です。"); 70 71if (msg != "") { 72event.preventDefault(); 73alert(msg); 74} 75}); 76 77 78form.addEventListener('change', function() { 79 80if (name.value != "") sessionStorage.setItem('name', name.value); 81if (furigana.value != "") sessionStorage.setItem('furigana', furigana.value); 82if (email.value != "") sessionStorage.setItem('email', email.value); 83 84}); 85 86// 前面遷移による、入力フォームの値を保持sessionStorage 87 88name.value = sessionStorage.getItem('name'); 89furigana.value = sessionStorage.getItem('furigana'); 90email.value = sessionStorage.getItem('email'); 91 92 93 94</script> 95</body> 96</html>

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

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

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

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

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

mather

2022/04/28 10:26

javasprict や reqired などスペルミスが目立ちます。気をつける癖を付けましょう。
m.ts10806

2022/04/28 11:47

>javasprict JavaScript じゃヴぁすくりぷと です。
guest

回答1

0

ベストアンサー

インデントを丁寧に行うとこうなります。

js

1form.addEventListener('submit', function(event) { 2 let msg = ""; 3 4 if (name.value == "") msg += "名前が入力されていません。\n"; 5 if (furigana.value == "") msg += "フリガナが入力されていません。\n"; 6 if (email.value == "") msg += "メールアドレスが入力されていません。\n"; 7 8 // ★② 9 else if(!reg.test(email.value)) { 10 msg +=("メールアドレスの形式が不正です。"); 11 12 if (msg != "") { 13 event.preventDefault(); 14 alert(msg); 15 } 16 });

質問のために部分的に修正した、などの要因かもしれませんが、括弧がうまく対応していませんし、 if (msg != "") という if 文は else if の中に記載されてしまっています。

投稿2022/04/28 10:23

mather

総合スコア6753

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問