入力フォームで、ボタンを押すとメールアドレス入力欄にアドレスの正規チェックのアラートを出すようにしたいですが上手くいきません。この提示コードはフォームが空の場合にボタンを押すと、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>
回答1件
あなたの回答
tips
プレビュー