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

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

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

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

jQuery

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

Q&A

解決済

1回答

2278閲覧

【フォームバリデーション】jqueryでカタカナの入力値以外を必須項目にしたい

freedomman

総合スコア25

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/08/31 01:27

###前提・実現したいこと
現在フォームのバリデーション構築を行っております。

①カタカナのテキストフィールドは「任意」の入力にしたいので、「入力必須項目です」のアラートは出力しない
②カタカナのテキストフィールドに入力されたときのみカタカナ入力のバリデーションを行いたい

二つの問題を解決したいのですが、手詰まりしました。
ご教授・アドバイスよろしくお願いします。

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

html

1<!--必須項目--> 2<div class="item okView"> 3 <div class="itemTit"> 4 <span class="tag must">必須</span> 5 <span class="itemName">お名前</span> 6 </div> 7 <div class="itemDet"> 8 <div class="col2"> 9 <div> 10 <div class="itemSubTxt"></div> 11 <input type="text" name="" class="inputTxt validate" data-validate="name" placeholder="苗字"> 12 </div> 13 <div> 14 <div class="itemSubTxt"></div> 15 <input type="text" name="" class="inputTxt validate" data-validate="name" placeholder="名前"> 16 </div> 17 </div> 18 </div> 19</div> 20 21<!--任意項目--> 22<div class="item okView"> 23 <div class="itemTit"> 24 <span class="tag must">任意</span> 25 <span class="itemName">フリガナ</span> 26 </div> 27 <div class="itemDet"> 28 <input type="text" name="" class="inputTxt validate kana" data-validate="kana" placeholder="カタカナ"> 29 </div> 30</div>

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

js

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

JavaScript

1if (vVal == '' && vType == 'kana') { 2 return false; // OK 3} 4else if (vVal == '') { 5 validate = { 6 regx: /[^\s ]/, 7 text: '入力必須項目です' 8 } 9} 10else {/* 省略 */}

投稿2017/08/31 02:30

kei344

総合スコア69366

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

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

freedomman

2017/08/31 03:11

回答ありがとうございます。 無事解決できました。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問