簡単にフォームの入力チェックが行えるjquery.validate.js

Check このエントリーをはてなブックマークに追加

簡単にフォームの入力チェックが行える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 フォームバリデーション ライブラリ 開発支援