簡単にフォームの入力チェックが行えるjquery.validate.js
配布元:bassistance.de » jQuery plugin: Validation
ライセンス:MIT/GPL
jquery.validate.jsは入力フォームのバリデーション(チェック)を簡単に実装することが出来るjQueryプラグインです。
利用方法
利用方法はまず、jQuery本体と配布元よりダウンロードしてきた「jquery.curvycorners.min.js」をhead要素などで読み込みます。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
バリデーションを行いたいのが次のようなHTMLの場合、
<form method="post">
<ul>
<li>名前 <input name="name" type="text" /></li>
<li>メール <input name="mail" type="text" /></li>
<li>url <input name="url" type="text" /></li>
</ul>
<input type="submit" name="Submit" value="Submit"/>
</form>
JavaScriptで次のようの設定を行うとバリデーションを実装することが出来ます。
$(function(){
$("form").validate({
rules: {
name :{
required: true
},
mail :{
required: true,
email: true
},
url :{
required: true
}
},
messages: {
name :{
required: "お名前を入力してください"
},
mail :{
required: "メールアドレスを入力してください",
email: "正しいメールアドレスを入力してください"
},
url :{
required: "URLを入力してください"
}
}
});
})
これは名前、メールアドレス、URLは必須でメールアドレスは書式のチェックを行うという設定です。
最初にバリデーションを行うフォームを設定し、
$("form").validate({
rulesでどの入力フォームでバリデーションを行うのか、messagesでエラーが合った場合のメッセージを設定できます。
エラーがあった場合は次のようなHTMLが出力されますので、CSSを設定しておくとエラーであることがわかりやすくなるでしょう。
<label for="name" generated="true" class="error">お名前を入力してください</label>
スポンサードリンク
コメント
カテゴリー:jQuery フォームバリデーション ライブラリ 開発支援