Q&A
まず最初に、うまくいかない、じゃわからないので、事実を正確に表現してください。
なにがどうなると（想定ではこうなるはずなのに）結果はこうなった、と。
次に、https://idotdesign.net/blog/web/js/jquery-jpostal-js/ で配布されているのをダウンロードして組み込んでありますか？ README.txtなどはチェックしてますか？
###前提
会員機能実装中 phpとJS使用
入力項目入力→JSでチェック→問題なければPOST→PHPでチェック
###やりたいこと
●郵便番号にJSでバリデーションを掛けたい
●郵便番号を入力した際に、入力完了で住所を自動入力させたい。
html
1 2<!DOCTYPE html> 3<html> 4<head> 5<title>会員登録画面</title> 6<meta charset="utf-8"> 7 8<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 9</head> 10<body> 11<h1>会員登録画面</h1> 12 13<?php if (count($errors) === 0): ?> 14 15 <script type="text/javascript"> 16$(function(){ 17 $('#form1').on('submit',function(e){ 18 $('#last_name').trigger('keyup'); 19 $('#first_name').trigger('keyup'); 20 $('#last_name_kana').trigger('keyup'); 21 $('#first_name_kana').trigger('keyup'); 22 $('#number').trigger('keyup'); 23 $('#postcode').trigger('keyup'); 24 $('#prefecture_id').trigger('keyup'); 25 $('#password').trigger('keyup'); 26 27 if($('#last_name_error').text()!=="") e.preventDefault(); 28 if($('#first_name_error').text()!=="") e.preventDefault(); 29 if($('#last_name_kana_error').text()!=="") e.preventDefault(); 30 if($('#first_name_kana_error').text()!=="") e.preventDefault(); 31 if($('#number_error').text()!=="") e.preventDefault(); 32 if($('#postcode_error').text()!=="") e.preventDefault(); 33 if($('#prefecture_id_error').text()!=="") e.preventDefault(); 34 if($('#password_error').text()!=="") e.preventDefault(); 35 }); 36 37 $('#last_name').on('keyup',function(){ 38 $("#last_name_error").empty(); 39 var last_name=$(this).val(); 40 if(last_name==""){ 41 $("#last_name_error").html("<i class='fa fa-exclamation-circle'></i> ※入力して下さい。"); 42 $("#last_name").addClass("inp_error"); 43 }else if(!last_name.match(/[亜-熙]/)){ 44 $('#last_name_error').html("<i class='fa fa-exclamation-circle'></i> ※漢字で入力してください"); 45 $("#last_name").addClass("inp_error"); 46 }else if(last_name.length > 8){ 47 $('#last_name_error').html("<i class='fa fa-exclamation-circle'></i> ※8文字以内で入力してください。"); 48 $("#last_name").addClass("inp_error"); 49 } 50 }); 51 52 53 ーーーー割愛ーーーー 54 55 $('#postcode').on('keyup',function(){ 56 $("#postcode_error").empty(); 57 var postcode=$(this).val(); 58 if(postcode==""){ 59 $("#postcode_error").html("<i class='fa fa-exclamation-circle'></i> ※last_nameは必須です。"); 60 $("#postcode").addClass("inp_error"); 61 }else if(!postcode.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)){ 62 $('#postcode_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 63 $("#postcode").addClass("inp_error"); 64 }else if(postcode.length > 255){ 65 $('#postcode_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 66 $("#postcode").addClass("inp_error"); 67 } 68 }); 69 70 71 $('#prefecture_id').on('keyup',function(){ 72 $("#prefecture_id_error").empty(); 73 var prefecture_id=$(this).val(); 74 if(prefecture_id==""){ 75 $("#prefecture_id_error").html("<i class='fa fa-exclamation-circle'></i> ※last_nameは必須です。"); 76 $("#prefecture_id").addClass("inp_error"); 77 }else if(!prefecture_id.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)){ 78 $('#prefecture_id_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 79 $("#prefecture_id").addClass("inp_error"); 80 }else if(prefecture_id.length > 255){ 81 $('#prefecture_id_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 82 $("#prefecture_id").addClass("inp_error"); 83 } 84 }); 85 86 87 $('#password').on('keyup',function(){ 88 $("#password_error").empty(); 89 var password=$(this).val(); 90 if(password==""){ 91 $("#password_error").html("<i class='fa fa-exclamation-circle'></i> ※入力されていません"); 92 $("#password").addClass("inp_error"); 93 }else if(!password.match(/^[a-zA-Z0-9!#$%&.@_-]{8,32}+$/)){ 94 $('#password_error').html("<i class='fa fa-exclamation-circle'></i> ※文字種"); 95 $("#password").addClass("inp_error"); 96 97 } 98 }); 99}); 100 101</script> 102 103 104 105<form action="registration_check.php" name="form1" id="form1" method="post"> 106 107 ーーーー割愛ーーーー 108 109<dt><span class="req">郵便番号:</span></dt> <input type="text" name="postcode" id="postcode"> 110<span id="postcode_error" class="error_m"></span><br> 111 112<dt><span class="req">住所:</span></dt> <input type="text" name="prefecture_id" id="prefecture_id"> 113<span id="prefecture_id_error" class="error_m"></span><br> 114 115<dt><span class="req">パスワード:</span></dt> <input type="text" name="password" id="password"> 116<span id="password_error" class="error_m"></span><br> 117 118<input type="hidden" name="token" value="<?=$token?>"> 119<input type="submit" value="確認する"> 120 121</form> 122 123<?php elseif(count($errors) > 0): ?> 124 125<?php 126foreach($errors as $value){ 127 echo "<p>".$value."</p>"; 128} 129?> 130 131<?php endif; ?> 132 133</body> 134</html>
###試したこと
上記を下記サイト参考に修正
https://idotdesign.net/blog/web/js/jquery-jpostal-js/
html
1 $('#postcode').on('keyup',function(){ 2 $("#postcode_error").empty(); 3 var postcode=$(this).val(); 4 if(postcode==""){ 5 $("#postcode_error").html("<i class='fa fa-exclamation-circle'></i> ※last_nameは必須です。"); 6 $("#postcode").addClass("inp_error"); 7 }else if(!postcode.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)){ 8 $('#postcode_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 9 $("#postcode").addClass("inp_error"); 10 }else if(postcode.length > 255){ 11 $('#postcode_error').html("<i class='fa fa-exclamation-circle'></i> ※正しいメールアドレスを入力してください。"); 12 $("#postcode").addClass("inp_error"); 13 }else if('#postcode').jpostal({ 14 click : '#btn', 15 postcode : [ 16 '#postcode', 17 ], 18 address : { 19 '#address' : '%3%4%5', 20 } 21 }); 22 23ーーーー割愛ーーー 24 25<dt><span class="req">郵便番号:</span></dt> <input type="text" name="postcode" id="postcode"> 26<span id="postcode_error" class="error_m"></span><br> 27 28<dt><span class="req">住所:</span></dt> 29<input id="address" input name="address" type="text" placeholder="こちらには記載しないでください"> 30</div> 31 32<dt><span class="req">パスワード:</span></dt> <input type="text" name="password" id="password"> 33<span id="password_error" class="error_m"></span><br> 34 35<input type="hidden" name="token" value="<?=$token?>"> 36<input type="submit" value="確認する"> 37 38</form> 39 40<?php elseif(count($errors) > 0): ?> 41 42<?php 43foreach($errors as $value){ 44 echo "<p>".$value."</p>"; 45} 46?> 47 48<?php endif; ?> 49 50</body> 51</html>
無邪気にそのまま試しました。（もちろんうまくいかず）
###質問点
●郵便番号にJSでバリデーションを掛けたい
●郵便番号を入力した際に、入力完了で住所を自動入力させたい。
上記を解決するには、どう修正すれば宜しいでしょうか？
ご回答宜しくお願いいたします
※postcodeのバリデーションがメアドになっているのは一旦スルーしてください。
回答1件
0
ベストアンサー
バリデーションは後回しにして
現在はid=btnをクリックしたら実行するようになっています。(エラーで動いていませんが)
なのでまずは,下記のようにjpostalだけの処理にして
$('#postcode').on('keyup',function(){ $('#postcode').jpostal({ postcode : [ '#postcode', ], address : { '#address' : '%3%4%5', } }); });
jpostalが動くかどうか確かめてください
また、そろそろ開発ツールなどで、コンソールのエラーは確かめられるようになってください
投稿2019/03/04 04:32
総合スコア1820
<head>の中のJqeryの記載順番のルールを知らなかった為、
バリデーションが掛かりませんでした。失礼いたしました。
ご回答ありがとうございました。
開発ツールの使い方、、、。勉強しなくてはと思っているのですがなかなか時間がなく
都度お手間とらせてすみません。
バリデーションが動かないのは
}else if('#postcode').jpostal({
ここでエラーが出ているので全体が動かなかった
開発ツールはネットワークなどは難しいので後で覚えてもいいですがjavascriptの開発をするならコンソールだけは先に覚えてください
構文エラー程度の問題に時間を浪費するよりはデバッグ覚える時間に使った方が100倍以上有益かと思います。その後も同様の問題に悩まなくなると思えばデバッグを有効活用できる効果ははかり知れませんよ。
あなたの回答
tips
プレビュー
