hifive + jQuery Validation Plugin

※ブラウザはできるだけ最新のバージョンをご利用ください。
特に、IE6/7等の古いブラウザでは正しく動作しない場合があります。

hifive + jQuery Validateプラグインの連携サンプル

送信ボタンを押下すると、フォーム要素に入力された値をチェックします。
また、フォーム要素への入力直後にも値をチェックします。

アンケート
好きな食べ物を選択して下さい

和食 中華 イタリアン フレンチ エスニック 韓国

タバコを吸っていますか?
はい いいえ

1日の喫煙本数

ユーザ情報登録

Eメールアドレス

URL(任意)

ユーザID  (“hifive”以外を入力すると「入力されたユーザ名は既に使用されています」がエラーメッセージに表示されます)

パスワードを入力(8~12文字)

パスワードを再入力

利用規約およびプライバシーポリシーに同意する


jQuery Validateの使い方

HTML
		

JavaScript
		$('#form1').validate({
			rules: {
				firstname: {
					required: true
				},
				lastname: {
					required: true
				}
			},
			messages: {
				firstname: {
					required: '名を入力して下さい。'
				},
				lastname: {
					required: '姓を入力して下さい。'
				}
			}
		});
	
validateメソッドでバリデータを初期化します。
パラメータには、ルールやエラーメッセージ等のパラメータを指定することができます。

rulesプロパティには、バリデーションのルールを定義します。
messagesプロパティには、バリデーションエラー時に画面上に表示するメッセージを定義します。
※ その他の指定可能なプロパティについては、こちらを参照下さい。

rulesとmessagesに指定しているオブジェクトのキーは、INPUT要素のnameプロパティの名前と一致させます。

初期化後は、submitイベントが発生することで、自動的にバリデーションが実行されます。

デフォルトでrulesに指定可能なルール一覧

required 必須入力チェックを行う
remote バリデーション結果をサーバに問い合わせる
email 入力値がメールアドレスのフォーマットであるか
url 入力値がURLのフォーマットであるか
date 入力値が日付であるか
dateISO 入力値がISO日付であるか
number 入力値が数字であるか
digits 入力値がクレジットカード番号のフォーマットであるか
creditcard 入力値がクレジットカード番号のフォーマットであるか
equalTo 入力値が指定した値と一致しているか
maxlength 入力値が指定した桁数以下か
minlength 入力値が指定した桁数以上か
rengelength 入力値が指定した桁数の範囲であるか
renge 入力値が指定した数字の範囲であるか
max 入力値が指定した数字以下であるか
min 入力値が指定した数字以上であるか


No tags for this post.