jquery.validate.jsでvalidateチェックタイミングを指定する
jquery.validate.jsはsubmitのタイミングでチェックされますが、formに対してvalid()メソッドを実行することでボタンクリックイベントやチェンジイベントなどのタイミングでバリデートチェックを行うことができます。
まずjqueryとjquery.validate.jsをプリロードします。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="../js/jquery.validate.min.js"></script>
年齢が20以上の場合、備考を必須にしています。
<body>
<!-- コーディング部分 -->
<div>
<form id="testForm" method="post">
<p>
<lable for="name" >名前</label>
<input name="name" type="text" />
</p>
<p>
<label for="age">年齢</label>
<input name="age" id="age" type="number" />
</p>
<p>
<lable for="biko">備考</label>
<input name="biko" type="textarea" />
</p>
<p>
<input type="submit" name="Submit" value="送信"/>
</p>
</form>
</div>
<script>
$("#testForm").validate({
rules:{
name:{
required:true,
minlength:3
},
biko:{
required:function() {
return $("#age").val() >= 20;
}
}
},
messages:{
name:{
required:'名前を入力してください',
minlength:'名前は3文字以上入力してください'
},
biko:{
required:'備考を入力してください'
}
}
});
$("#age").blur(function(){
$("#testForm").valid();
});
</script>
</body>
validateメソッドの後にvalid()を実行しなくてはいけません。
上記ではid=ageのフォーム部品からカーソルアウトしたタイミングで備考欄の必須チェックを行っています。
備考欄が未入力の場合エラーメッセージが表示され、備考欄が入力済みの場合、エラーにはなりません。
また、valid()はformに対して実行する必要があります。（上記では$(“#testForm”)に対して。）
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント