Q&A
本当に下記のようにリンクさせてるのですか？
http://js/init.js
前提・実現したいこと
フォームより入力された文字列が、あらかじめ定義された配列の要素として存在するかチェックするﾌﾟﾛｸﾞﾗﾑを作っています。
存在すれば、確認画面へ飛び、存在しなければ、エラーメッセージを表示するというものです。
発生している問題・エラーメッセージ
該当のソースコードですとエラーメッセージが表示されません。
該当のソースコード
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" charset="utf-8"> </head> <script src="http://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_ja.min.js"></script> <script src="http://js/init.js" type="text/javascript" charset="utf-8"></script> <body> <div> <p> <input type="text" name="name" class="name"> </p> <p> <input type="submit" class="submit" value="Submit"> </p> </div> </body> <script type="text/javascript"> function existCheck(){ //入力フォームより入力された企業名 var name=""; //登録された企業を配列に格納 var nameArr = ["ABC㈱","㈱DEF","GHI工業","JKL製作所"]; //入力した値が存在するかチェック var sch = nameArr.indexOf(name);//配列に存在しない値であれば-1を返す // $(function(){ $jQuery.validator.addMethod('my_rule',function(sch,element){ if(this.optional(element)){ return true; } if(sch == -1){ return false; } return true; },'存在しません。'); $("#form1").validate({ rules: { name: { ruquired: true, my_rule: true } } }); } } </script> </html>
試したこと
<script></script>部分のプログラムだけ下の雛形で試したところ、ﾌｫｰﾑの横にメッセージが出力されました。html/jQuery/javascript
1【validation雛形】 2 3$(function() { 4 5 $.validator.addMethod('my_rule', function(value, element) { 6 7 if ( this.optional( element ) ) { 8 return true; 9 } 10 if (value == '石橋') { 11 return false; 12 } 13 return true; 14 }, '存在しません'); 15 $("#commentForm").validate({ 16 rules: { 17 name: { 18 required: true, 19 my_rule: true 20 } 21 } 22 }); 23},jQuery) 24
補足情報（FW/ツールのバージョンなど）
実行時環境
google web maker
m.ts10806様
>本当に下記のようにリンクさせてるのですか？
>http://js/init.js
すみません。おっしゃっている意味がよくわかりません。
ご自身が提示されたコードの下記です。
<script src="http://js/init.js" type="text/javascript" charset="utf-8"></script>
回答2件
0
存在するかどうかでチェックをするときは普通は
- セレクトボックス
- ラジオボタン
のどちらかをUIにします
どうしてもテキストボックスでユーザーに入力させたいならpatternを利用下さい
HTML
1<form> 2<input type="text" name="hoge" pattern="abc|def|ghi" required> 3<input type="submit" value="send"> 4</form>
投稿2019/10/15 03:54
編集2019/10/15 03:56
総合スコア116661
0
入力前にチェックすることはできないので .addMethod() で渡した function 内でチェックするようにしてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
https://jqueryvalidation.org/jQuery.validator.addMethod/
JavaScript
1 //if (value == '石橋') { 2 if (nameArr.indexOf(value) < 0) { 3 return false; 4 }
投稿2019/10/16 03:15
総合スコア13749
あなたの回答
tips
プレビュー
