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をプリロードします。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
body部にformを作成します。
<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の大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
資格:少額短期保険募集人,FP3級
コメント