jquery.validate.jsで独自Validationメソッドを追加する
jquery.validate.jsで独自Validationメソッドを追加します。
追加するにはjQuery.validator.addMethodを使用します。
第1引数に独自Validationメソッド名を指定、
第2引数に独自Validation関数を指定、関数の第1引数は入力値、第2引数はチェックする要素を指定、
第3引数にエラー時のメッセージを指定（省略可能だが「Warning: No message defined for name」と表示される）します。
まずjqueryとjquery.validate.jsをプリロードします。
|
1 2 |
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="../js/jquery.validate.min.js"></script> |
body部にformを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<body> <!-- コーディング部分 --> <div> <form id="testForm" method="post"> <p> <lable for="name" >ユーザID</label> <input name="name" type="text" /> </p> <p> <label for="password">パスワード</label> <input name="password" id="password" type="password" /> </p> <p> <input type="submit" name="Submit" value="送信"/> </p> </form> </div> <script> $("#testForm").validate({ rules:{ name:{ required:true, CustomValidateUserID:true }, password:{ required:true } }, messages:{ name:{ required:'名前を入力してください', }, password:{ required:'パスワードを入力してください' } } }); jQuery.validator.addMethod( "CustomValidateUserID", function(val,elem){ reg = new RegExp("^[0-9a-zA-Z]+$"); return this.optional(elem) || reg.test(val); }, "ユーザIDは0-9,a-z,A-Zを使用してください" ); </script> </body> |
CustomValidateUserIDという名前の独自Validationを追加しています。
this.optionalはjquery.validate.jsの内部関数で、elemに値が入ってない場合trueとなり、エラーメッセージは表示されません。
elemに値が入っている場合、正規表現がfalseの場合エラーとなり、trueの場合、エラーメッセージは表示されません。
return部分の書き方はこのように書くと覚えておいて問題ないです。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
