jquery.validate.jsでフォームを独自チェック
jquery.validate.jsでフォームを独自チェックすることができます。
まず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を作成します。ラジオボタンが「はい」の場合のみテキストエリアが必須となるようなformにします。(依存関係があるようにします)
<body>
<!-- コーディング部分 -->
<div>
<form id="testForm" method="post"> <p>
<lable for="name" >名前</label>
<input name="name" type="text" />
</p>
<p>
<label for="radio1">備考を必須にしますか?</label>
<input name="radio1" id="radio1" type="radio" value="1" />はい
<input name="radio1" id="radio2" type="radio" value="2" checked/>いいえ
</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:{
depends:function() {
return $("#radio1").is(":checked");
}
}
}
},
messages:{
name:{
required:'名前を入力してください',
minlength:'名前は3文字以上入力してください'
},
biko:{
required:'備考を入力してください'
}
}
});
</script>
</body>
最後にformのid属性にvalidate()メソッドを実行していますがこの部分で依存関係や必須項目などを指定します。
まずnameを必須、3文字以上入力するようにチェックしています。
bikoはradio1がチェックされた場合(戻り値がtrue)のみ必須となるようにチェックしています。
それぞれのチェックでエラーの場合messagesでエラーメッセージを独自のメッセージを表示するように指定しています。
これでクライアントサイドで独自のvalidateチェックが行えます。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント