Q&A
ご回答ありがとうございます。
今日の夜トライしてみます。
前提・実現したいこと
起こっている事象
JavaScriptでバリデーションチェックを追加。
バリデーションチェックに該当するような値を入力し、登録ボタンを押下。
バリデーションチェックが動作したが、その後、次画面に遷移してしまう。
実現したいこと
バリデーションチェックに該当した後、次画面に遷移しないようにしたい。
ご教授しただけたら、幸いです。
発生している問題・エラーメッセージ
エラーメッセージ なし ### 該当のソースコード HTML(JavaScriptはhtmlに記載しています) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <script type="text/javascript"> window.onload = function(){ const btnSubmit = document.getElementById("btnSubmit"); const inputName = document.getElementById("inputName"); const inputMail = document.getElementById("inputMail"); const reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/; btnSubmit.addEventListener("click",function(event){ let message = []; /*入力値チェック*/ if(inputName.value == ""){ message.push("氏名が未入力です。"); } if(inputMail.value == ""){ message.push("メールアドレスが未入力です。") }else if(!reg.test(inputMail.value)){ message.push("メールアドレスの形式が不正です"); } if(message.length > 0){ alert(message); return; } alert("入力チェックOK"); }); }; </script> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>登録</title> </head> <body> <h1>ユーザー登録画面</h1> <div id = "message"> </div> <form action ="/Registergamen/Register" method="post" > ユーザー名:<input type = "text" name = "name" id="inputName" maxlength="100" value="" placeholder="氏名を入力してください"><br> メールアドレス:<input type = "text" name = "mail" id="inputMail" maxlength="100" value="" placeholder="メールアドレス"><br> パスワード:<input type = "password" name = "pass"><br> <input type="submit" id="btnSubmit" value = "登録" > </form> </body> </html>
試したこと
input type = "button"に変更したが、次画面に遷移しなかったです。
補足情報（FW/ツールのバージョンなど）
submit後の処理はDBに登録して登録完了画面に遷移する
回答2件
0
ベストアンサー
以下の３点を修正するとどないでっか？ (※追記あり）
(1) <form> に id属性を追加
diff
1-<form action ="/Registergamen/Register" method="post" > 2+<form action ="/Registergamen/Register" method="post" id="registerForm">
(2) イベントリスナーを設定する対象を registerForm に、設定するイベントを submit に変更
diff
1- const btnSubmit = document.getElementById("btnSubmit"); 2+ const registerForm = document.getElementById("registerForm"); 3 const inputName = document.getElementById("inputName"); 4 const inputMail = document.getElementById("inputMail"); 5 const reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/; 6 7- btnSubmit.addEventListener("click",function(event){ 8+ registerForm.addEventListener("submit",function(event){ 9
(3)【必須】入力エラーがあるときに、return する前に、event.preventDefault()する。
diff
1 if(message.length > 0){ 2 alert(message); 3+ event.preventDefault(); 4 return; 5 } 6
追記： 上記で、(3)のみを修正しても意図通りになると思います。
投稿2021/09/16 12:29
編集2021/09/16 12:39
退会済みユーザー
総合スコア0
0
まず未入力のチェックはrequiredをつけることが寛容
入力規則のチェックにはpatternを設定してあげてください
投稿2021/09/17 00:11
総合スコア116724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/17 00:55
2021/09/17 11:15