Q&A
checkForm() の定義はどこ？
###前提
phpで仮会員登録を実施しています。
JSについて質問させてください。
phpファイルにてサブミットの前にJSでバリデーションをかけたいです。
ポップアップのようなアラートではなく、
指定した場所に。
test.php
1<?php 2session_start(); 3 4header("Content-type: text/html; charset=utf-8"); 5 6//クロスサイトリクエストフォージェリ（CSRF）対策 7$_SESSION['token'] = base64_encode(openssl_random_pseudo_bytes(32)); 8$token = $_SESSION['token']; 9 10//クリックジャッキング対策 11header('X-FRAME-OPTIONS: SAMEORIGIN'); 12 13?> 14 15<!DOCTYPE html> 16<html> 17<head> 18<title>【DB課題】仮会員登録</title> 19<meta charset="utf-8"> 20<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 21</head> 22<body> 23<h1>仮会員登録</h1> 24 25<form method="post" name="form1" action="registration_mail_check.php"> 26 27<p>メールアドレス 必須</p> 28 29 <dl class="clearfix"> 30 <dt><span class="req">必須</span>メールアドレス<br>（半角英数字）</dt> 31 <dd> 32 <input type="text" id="mail" name="mail_address"> 33 <span id="mail_error" class="error_m"></span> 34 35 36 37<p><input type="hidden" name="token" value="<?=$token?>"></p> 38<input type="submit" value="登録する" onclick="return checkForm();"> 39 40 41<script type="text/javascript"> 42 43function input_check(){ 44 var result = true; 45 46$('#mailad').removeClass("inp_error"); 47 48$("#mail_error").empty(); 49 50var mail = $("#mail").val(); 51 52 53if(mail == ""){ 54 $("#mail_error").php("<i class='fa fa-exclamation-circle'></i> メールアドレスは必須です。"); 55 $("#mail").addClass("inp_error"); 56 result = false; 57 }else if(!mail.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)){ 58 $('#mail_error').php("<i class='fa fa-exclamation-circle'></i> 正しいメールアドレスを入力してください。"); 59 $("#mail").addClass("inp_error"); 60 result = false; 61 }else if(mail.length > 255){ 62 $('#mail_error').php("<i class='fa fa-exclamation-circle'></i> 正しいメールアドレスを入力してください。"); 63 $("#mail").addClass("inp_error"); 64 result = false; 65 } 66 return result; 67 } 68} 69</script> 70 71</form> 72 73 74</body> 75</html>
###疑問点
すみませんJSが効かずに、サブミットされてしまいます。
どこの部分を修正すれば宜しいでしょうか？
JavaScriptの質問なのに、なぜタグはPHP?
Formの定数失礼いたしました。
phpのファイルにJSを書き込んでいる為です
ご指摘ありがとうございます。編集いたします。
回答3件
0
こういうことでしょうか？
javascript
1<script> 2$(function(){ 3 $('#form1').on('submit',function(e){ 4 $('#mail').trigger('change'); 5 if($('#mail_error').text()!=="") e.preventDefault(); 6 }); 7 $('#mail').on('change',function(){ 8 $("#mail_error").empty(); 9 var mail=$(this).val(); 10 if(mail==""){ 11 $("#mail_error").html("<i class='fa fa-exclamation-circle'></i> メールアドレスは必須です。"); 12 $("#mail").addClass("inp_error"); 13 }else if(!mail.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)){ 14 $('#mail_error').html("<i class='fa fa-exclamation-circle'></i> 正しいメールアドレスを入力してください。"); 15 $("#mail").addClass("inp_error"); 16 }else if(mail.length > 255){ 17 $('#mail_error').html("<i class='fa fa-exclamation-circle'></i> 正しいメールアドレスを入力してください。"); 18 $("#mail").addClass("inp_error"); 19 } 20 }); 21}); 22</script> 23<form method="post" name="form1" id="form1"> 24<input type="text" id="mail" name="mail_address"> 25<span id="mail_error" class="error_m"></span><br> 26<input type="submit" value="send"> 27</form> 28
投稿2019/03/01 05:19
総合スコア114742
0
ベストアンサー
html
1<input type="submit" value="登録する" onclick="return checkForm();">
これが
html
1<input type="submit" value="登録する" onclick="return input_check();">
だと仮定して
javascript
1 function input_check(){ 2 var result = true; 3 4 $('#mailad').removeClass("inp_error"); 5 6$("#mail_error").empty(); 7 8var mail = $("#mail").val(); 9 10 11 if(mail == ""){ 12// $("#mail_error").php("<i class='fa fa-exclamation-circle'></i> メールアドレスは必須です。"); 13 $("#mail_error").append("<i class='fa fa-exclamation-circle'></i> メールアドレスは必須です。"); //以下同じ修正が必要 14 $("#mail").addClass("inp_error"); 15 result = false; 16 }else if(!mail.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)){ 17 $('#mail_error').php("<i class='fa fa-exclamation-circle'></i> 正しいメールアドレスを入力してください。"); 18 $("#mail").addClass("inp_error"); 19 result = false; 20 }else if(mail.length > 255){ 21 $('#mail_error').php("<i class='fa fa-exclamation-circle'></i> 正しいメールアドレスを入力してください。"); 22 $("#mail").addClass("inp_error"); 23 result = false; 24 } 25 return result; 26 } 27//} 閉じカッコが多い
投稿2019/03/01 05:19
総合スコア12705
お忙しい中ご回答ありがとうございます。
ご指摘通り名前の統一とコードの修正を行いましたが、
JS無効&サブミットされ、メールアドレスをPOSTできていないようでして、、、。
「サブミットされ、メールアドレスをPOSTできていない」というのは怖いですね。
フォームが2個あったりするんじゃないですか？
そもそも、POSTを確認できないなら、なぜサブミットされたと思うのでしょうか？
あと、サブミットしたときはjsは何もしないので、jsが動作するかどうかは、不正なアドレスを意図して入れないといけないのですが、その辺は大丈夫ですよね？
はい大丈夫です。
このファイルの次に、アドレス確認するファイルがあるのですが、
そこでアドレスが未入力だと言われています。
2個ありました。。。
こちらではその動きはしませんね。もちろんreturn input_check()や各種スクリプトの修正をした状態で、ですが。
もし質問を継続するなら、質問にその部分も追記してくださいね
別途の質問とさせていただきます。
ご回答ありがとうございました
あなたの回答
tips
プレビュー
