質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2269閲覧

jqueryのフォーム入力バリデーションで半角・全角スペースのみの入力はエラーにしたい

freedomman

総合スコア25

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/08/28 10:46

###前提・実現したいこと
フォームのバリデーションでフリガナの入力を制御しようとしてます。
全角カタカナ・半角カタカナ・全角スペース・半角スペースのみ入力OKにしたいのですが、
全角スペース・半角スペースのみ入力した場合は「入力必須項目です」とアラートを表示したいです。
ご教授よろしくお願いいたします。

###発生している問題・エラーメッセージ

現在は半角スペース、全角スペースのみの入力でもバリデートが通ってしまい「入力必須項目です」のアラートが表示できません。

###該当のソースコード

html

1<div class="item"> 2 <div class="itemTit"> 3 <span class="tag must">必須</span> 4 <span class="itemName">フリガナ</span> 5 </div> 6 <div class="itemDet"> 7 <input type="text" name="" value="" class="inputTxt validate" data-validate="kana" placeholder="カタカナ"> 8 </div> 9</div>

js

1$(function() { 2 3 var validate; 4 validateCount = $('[data-validate]').length; 5 6 $(document).ready(function() { 7 validatePass 8 }); 9 10 $(document).on('submit', '.validate_form', function() { 11 var valOk = true; 12 $.each($('.validate'), function() { 13 if (!$(this).hasClass('valChkOk')) { 14 $(this).blur(); 15 valOk = false; 16 } 17 }); 18 if (!valOk) { 19 return false; 20 } 21 }); 22 23 $(document).on('blur', '.validate', function() { 24 valType = $(this).attr('data-validate'); 25 valRequired = $(this).attr('data-required'); 26 t = $(this); 27 28 // バリデート結果 29 result = validateModel(valType, t.val(), valRequired); 30 31 // アラートを表示 32 if (result) { 33 if (!t.prev().hasClass('formErrorWrap')) { 34 t.addClass('errInput'); 35 var errorHtml = ''; 36 errorHtml += '<div class="formErrorWrap">'; 37 errorHtml += '<div class="formError">'; 38 errorHtml += '<div class="formErrorContent">' + result['text'] + '</div>'; 39 errorHtml += '<div class="formErrorArrow">'; 40 errorHtml += '<div class="line10"></div>'; 41 errorHtml += '<div class="line9"></div>'; 42 errorHtml += '<div class="line8"></div>'; 43 errorHtml += '<div class="line7"></div>'; 44 errorHtml += '<div class="line6"></div>'; 45 errorHtml += '<div class="line5"></div>'; 46 errorHtml += '<div class="line4"></div>'; 47 errorHtml += '<div class="line3"></div>'; 48 errorHtml += '<div class="line2"></div>'; 49 errorHtml += '<div class="line1"></div>'; 50 errorHtml += '</div>'; 51 errorHtml += '</div>'; 52 errorHtml += '</div>'; 53 t.before(errorHtml); 54 t.prev('.formErrorWrap').fadeIn('500', function() { 55 setTimeout(function() { 56 t.prev('.formErrorWrap').fadeOut(500).queue(function() { 57 t.prev('.formErrorWrap').remove().dequeue(); 58 }); 59 }, 2000); 60 }); 61 var errorTop = t.prev('.formErrorWrap').children('.formError').outerHeight(true) + 5; 62 t.prev('.formErrorWrap').children('.formError').css({ 63 'top': '-' + errorTop + 'px' 64 }); 65 } 66 // submitボタン判定用を削除 67 t.removeClass('valChkOk'); 68 validatePass(); 69 } else { 70 t.removeClass('errInput'); 71 t.prev('.formErrorWrap').fadeOut(500).queue(function() { 72 $(this).remove(); 73 }); 74 // submitボタン判定用を設定 75 t.addClass('valChkOk'); 76 validatePass(); 77 } 78 79 // クリックで非表示 80 $('.formError').on('click', function() { 81 $(this).parent('.formErrorWrap').fadeOut(500).queue(function() { 82 $(this).remove(); 83 }); 84 }); 85 86 }); 87 88 function validatePass() { 89 var cnt = 0; 90 $('.valChkOk').each(function(i) { 91 ++cnt; 92 }); 93 if (validateCount == cnt) { 94 $('.alertMsg').css('display', 'none'); 95 $('#nextStepBtn').css('display', 'block'); 96 } else { 97 $('#nextStepBtn').css('display', 'none'); 98 $('.alertMsg').css('display', ''); 99 } 100 } 101 102 // バリデート 103 function validateModel(vType, vVal, valRequired) { 104 validate; 105 if (valRequired == 'no' && !vVal) { 106 return false; 107 } else if (vVal == '' && valRequired != 'no') { 108 validate = { 109 regx: /[^\s ]/, 110 text: '入力必須項目です' 111 } 112 } else { 113 switch (vType) { 114 case 'name': 115 validate = { 116 regx: /^.{1,14}$/, 117 text: '14文字までのご入力となります' 118 } 119 break; 120 case 'kana': 121 validate = { 122 regx: /^[ァ-ンァ-ン゙゚ ]{1,20}$/, 123 text: '20文字までのカタカナでご入力ください' 124 } 125 break; 126 case 'birthYear': 127 validate = { 128 regx: /[^\s ]/, 129 text: '生年月日を入力してください' 130 } 131 break; 132 case 'birthMonth': 133 validate = { 134 regx: /[^\s ]/, 135 text: '生年月日を入力してください' 136 } 137 break; 138 case 'birthDay': 139 validate = { 140 regx: /[^\s ]/, 141 text: '生年月日を入力してください' 142 } 143 break; 144 case 'postcode': 145 validate = { 146 regx: /^[0-9]{7}$/, 147 text: '7桁の半角数字で入力してください' 148 } 149 break; 150 case 'addr1': 151 validate = { 152 regx: /[^\s ]/, 153 text: '都道府県を入力してください' 154 } 155 break; 156 case 'addr2': 157 validate = { 158 regx: /[^\s ]/, 159 text: '町名・番地を入力してください' 160 } 161 break; 162 case 'mail': 163 validate = { 164 regx: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/, 165 text: '@を含め、半角英数字で<br>入力してください。' 166 } 167 break; 168 case 'phone': 169 validate = { 170 regx: /^[0-9]{10,11}$/, 171 text: '半角数字10~11文字で<br>入力してください' 172 } 173 break; 174 case 'password': 175 validate = { 176 regx: /^[A-Za-z0-9]{8,20}$/, 177 text: '半角英数字8~20文字以下で<br>入力してください' 178 } 179 break; 180 case 'passwordRe': 181 var originPass = $('[data-validate="password"]').val(); 182 var passwordReRegx = new RegExp('^' + originPass + '$'); 183 validate = { 184 regx: passwordReRegx, 185 text: '入力された値が一致しません' 186 } 187 break; 188 case 'auth': 189 validate = { 190 regx: /[^\s ]/, 191 text: '' 192 } 193 break; 194 } 195 } 196 if (vVal.match(validate['regx'])) { 197 return false; // OK 198 } else { 199 return validate; // NG 200 } 201 } 202 203});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

全角スペースが許可されていませんね。ちょっとわかりにくいですが

JavaScript

1// regx: /^[ァ-ンァ-ン゙゚ ]{1,20}$/, 2regx: /^[ァ-ンァ-ン゙゚ ]{1,20}$/,

さて、ほかのロジックに若干影響を及ぼしますが、入力値をtrimしてはどうでしょうか?

JavaScript

1 // バリデート結果 2 result = validateModel(valType, $.trim(t.val()), valRequired);

jQuery.trim()
http://api.jquery.com/jQuery.trim/

投稿2017/08/28 13:01

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2017/08/28 13:18

前半のほう直ってませんね。全角スペースは投稿できないのかしらん
freedomman

2017/08/28 14:33

回答ありがとうございます。 文字列の先頭と末尾から空白を除去する「trim」知りませんでした。。 構築環境で試してみますー
freedomman

2017/08/28 15:10

result = validateModel(valType, $.trim(t.val()), valRequired); ↓ result = validateModel(valType, $.trim(t.val())); にしたら無事解決できました。 ありがとうございました。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問