Q&A
お忙しい中お早い返信感謝いたします。
また、質問が丸投げなこと申し訳ありません。
上記のコード参考に試させていただきます
###前提
phpでの仮会員登録を実施しています。
・メアド1
・メアド2（確認用）
二つの内容が一致しなかった場合エラーをアラート以外の形（text）で出したいです。
test.php
1<?php 2session_start(); 3header("Content-type: text/html; charset=utf-8"); 4$_SESSION['token'] = base64_encode(openssl_random_pseudo_bytes(32)); 5$token = $_SESSION['token']; 6 header('X-FRAME-OPTIONS: SAMEORIGIN'); 7?> 8 9 10<!DOCTYPE html> 11<html> 12<head> 13<title>【DB課題】仮会員登録</title> 14<meta charset="utf-8"> 15<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 16</head> 17<body> 18 19 20<script type="text/javascript"> 21$(function(){ 22 $('#form1').on('submit',function(e){ 23 $('#mail').trigger('change'); 24 if($('#mail_error').text()!=="") e.preventDefault(); 25 }); 26 $('#mail').on('change',function(){ 27 $("#mail_error").empty(); 28 var mail=$(this).val(); 29 if(mail==""){ 30 $("#mail_error").html("<i class='fa fa-exclamation-circle'></i> ※メールアドレスは必須です。"); 31 $("#mail").addClass("inp_error"); 32 }else if(!mail.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)){ 33 $('#mail_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 34 $("#mail").addClass("inp_error"); 35 }else if(mail.length > 255){ 36 $('#mail_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 37 $("#mail").addClass("inp_error"); 38 } 39 }); 40}); 41 42 43</script> 44<form method="post" name="form1" id="form1" action="registration_mail_check.php"> 45 46<dt><span class="req">メールアドレス 必須</span></dt> 47<input type="text" id="mail" name="mail"> 48<p><input type="hidden" name="token" value="<?=$token?>"></p> 49<span id="mail_error" class="error_m"></span><br> 50 51 52<dt><span class="req">メールアドレス（確認用）必須</span></dt> 53<input type="text" id="mail_2" name="mail_2"> 54 55<p><input type="submit" value="登録する"></p> 56 57 58</form> 59 60 61 62</body> 63</html>
###質問点
・メアド1の方はバリデーションが掛かるのですが、上記のコードにどのような形で組み込めばいいのかお教えください。
※多少丸投げになってしまい申し訳ありません。
回答2件
0
とりあえずやってみた
javascript
1<style> 2.inp_error{background-Color:red;} 3</style> 4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 5<script> 6$(function(){ 7 $('#form1').on('submit',function(e){ 8 $('#mail').trigger('change'); 9 $('#mail_2').trigger('change'); 10 if($('#mail_error').text()!=="") e.preventDefault(); 11 }); 12 $('#mail').on('change',function(){ 13 var mail=$(this).val(); 14 $(this).removeClass("inp_error"); 15 $("#mail_error").empty(); 16 if(mail==""){ 17 $("#mail_error").html("<i class='fa fa-exclamation-circle'></i> ※メールアドレスは必須です。"); 18 $(this).addClass("inp_error"); 19 }else if(!mail.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)){ 20 $('#mail_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 21 $(this).addClass("inp_error"); 22 }else if(mail.length > 255){ 23 $('#mail_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 24 $(this).addClass("inp_error"); 25 } 26 }); 27 $('#mail_2').on('change',function(){ 28 $(this).removeClass("inp_error"); 29 /* 修正：if($('#mail').not('.inp_error')){ */ 30 if($('#mail').is(':not(.inp_error)')){ 31 if($(this).val()!==$('#mail').val()){ 32 $("#mail_error").html("<i class='fa fa-exclamation-circle'></i> ※確認用メールアドレスが一致しません"); 33 $(this).addClass("inp_error"); 34 }else{ 35 $("#mail_error").empty(); 36 $(this).removeClass("inp_error"); 37 } 38 } 39 }); 40}); 41</script> 42<form method="post" name="form1" id="form1" action="registration_mail_check.php"> 43<dt><span class="req">メールアドレス 必須</span></dt> 44<input type="text" id="mail" name="mail"> 45<p><input type="hidden" name="token" value="<?=$token?>"></p> 46<span id="mail_error" class="error_m"></span><br> 47<dt><span class="req">メールアドレス（確認用）必須</span></dt> 48<input type="text" id="mail_2" name="mail_2"> 49<p><input type="submit" value="登録する"></p> 50</form> 51
投稿2019/03/01 08:17
編集2019/03/01 08:50
総合スコア114775
0
ベストアンサー
javascript
1$(function(){ 2 $('#form1').on('submit',function(e){ 3 $('#mail').trigger('keyup'); 4 $('#mail_2').trigger('keyup'); 5 if($('#mail_error').text()!=="") e.preventDefault(); 6 }); 7 $('#mail').on('keyup',function(){ 8 $("#mail_error").empty(); 9 var mail=$(this).val(); 10 var mail_conf = $('#mail_2').val(); 11 if(mail==""){ 12 $("#mail_error").html("<i class='fa fa-exclamation-circle'></i> ※メールアドレスは必須です。"); 13 $("#mail").addClass("inp_error"); 14 }else if(!mail.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)){ 15 $('#mail_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 16 $("#mail").addClass("inp_error"); 17 }else if(mail.length > 255){ 18 $('#mail_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 19 $("#mail").addClass("inp_error"); 20 }else if(mail !== mail_conf) { 21 $('#mail_error').html("<i class='fa fa-exclamation-circle'></i> ※確認とあいません"); 22 $("#mail").addClass("inp_error"); 23 } 24 }); 25 $('#mail_2').on('keyup',function(){ 26 $("#mail_error").empty(); 27 var mail=$('#mail').val(); 28 var mail_conf = $(this).val(); 29 if(mail==""){ 30 $("#mail_error").html("<i class='fa fa-exclamation-circle'></i> ※メールアドレスは必須です。"); 31 $("#mail").addClass("inp_error"); 32 }else if(!mail.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)){ 33 $('#mail_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 34 $("#mail").addClass("inp_error"); 35 }else if(mail.length > 255){ 36 $('#mail_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 37 $("#mail").addClass("inp_error"); 38 }else if(mail !== mail_conf) { 39 $('#mail_error').html("<i class='fa fa-exclamation-circle'></i> ※確認とあいません"); 40 $("#mail").addClass("inp_error"); 41 } 42 }); 43});
投稿2019/03/01 07:41
編集2019/03/01 08:27
総合スコア12705
暇だよ。内緒だよ。(お察しください)
冗談はさておき、jqueryのベストプラクティスは分かりませんが、原理的に両方のボックスにイベントコールバックをしかけて、両方で比較する、ということになるはず。
暇なんですね⁉（失礼いたしました）
冗談はさておき、上記のコードためした所スルーされている現状なので
papinianus さんのコード参考に再考させていただきます。
動作確認しているのですが、スルーとは？
JSが効かないということでございます
もともとのエラーは出てますか(正しいアドレスにしろとか)
回答欄のコードを逆にコピペしましたが、こちらでは動作している風です。
もし分けありません自分の勘違いです。
JS自体はかかっていますが、
以下の減少が発生しています。
・ページ表示→入力もしない状態→登録ボタン押下orENTER→JSが効かない
・入力で一度間違える→以降は未入力の場合もエラーが表示されます
入力しない場合はボタン押下できないよう変更いたしました。
今回もご協力いただき誠にありがとうございました。
とても助かりました
yambejp様ベストじゃないの？？
submitを更新しました。
一つ前の質問は yambejp様 のコードを参考にさせていただきましたが
（そういう意味ではベスト）
こちらの質問では、 yambejp様のご意見が来た時には解決しておりましたため
papinianus様ベストとさせていただきました
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/01 08:25
2019/03/01 08:34
2019/03/01 08:50
2019/03/01 09:13