JavaScriptプログラムに関する各種メモ書き

jQueryでフォームの入力値をチェックする(Validation)プラグイン

● jQuery Validation Plugin

http://jqueryvalidation.org

● 日本語での解説

http://kudakurage.hatenadiary.com/entry/20091211/1260521031

● スクリプトの読み込み

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js

● 用意するHTML

<form name="FM">
<input type="text" name="hoge">
<input type="text" name="fuga">
</form>

● バリデーションの定義

$("#FM").validate({
	rules: {
		hoge: {
			required: true
		} ,
		'fuga': {
			required: true
		} 
	} ,
	messages: {
		hoge: {
			required: '入力してください。'
		} ,
		'fuga': {
			required: '入力必須項目です。'
		} 
	}
});

● 標準搭載されているバリデーションメソッド

required – Makes the element required.
remote – Requests a resource to check the element for validity.
minlength – Makes the element require a given minimum length.
maxlength – Makes the element require a given maxmimum length.
rangelength – Makes the element require a given value range.
min – Makes the element require a given minimum.
max – Makes the element require a given maximum.
range – Makes the element require a given value range.
email – Makes the element require a valid email
url – Makes the element require a valid url
date – Makes the element require a date.
dateISO – Makes the element require an ISO date.
number – Makes the element require a decimal number.
digits – Makes the element require digits only.
creditcard – Makes the element require a credit card number.
equalTo – Requires the element to be the same as another one

● 正規表現のバリデーションメソッドを追加する

$.validator.addMethod("myregex", function(value, element, reg_str) {
	var re = new RegExp(reg_str);
	return re.test(value);
}, "入力値が正しくありません");

バリデーション定義に以下のように記述

rules: {
	postal: {
		myregex: '^[0-9\-]+$'
	}
} ,
messages: {
	postal: {
		myregex: '郵便番号を正しく入力してください。'
	}
}

● バリデーションのルールを追加するには関数を定義します

jQuery.validator.addMethod('my_validation_func', function(value, element) {
	if ( XXXXX ){		// XXXXX にエラー判別ロジックを記述
			return true;	// trueが返るとエラーとならない
		}
	else{
		return false;	// falseが返るとエラー
	}
}, 'デフォルトのエラーメッセージ');

● エラー時にエラーのあったフォーム要素自身にエフェクトをかける

$("#FM").validate({
  highlight: function(element, errorClass) {
     $(element).fadeOut(function() {
       $(element).fadeIn()
     })
  }
});

● フォームのハイライトを中止する

標準ではエラー時にフォーム要素に error というクラスが付加されますが、これがいらない場合は 空のfunction() を定義します。

$("#FM").validate({
    highlight: function(element, errorClass) {
    }
});

● 任意のタイミングでバリデーションを実行する

バリデーションの実行タイミングは ・フォーム Submit時 ・エラー後のフォーム内容変更時 ですが、任意のタイミングでバリデーションを実行するには valid()メソッドを実行すればOK。

<form id="FM">
$("#FM").valid();

● 特定のボタンが押された時など任意のタイミングでvalidationを停止する

$("#FM").validate().cancelSubmit = true;

● バリデーション required 条件の条件分岐1

下記のようにすると id="foo" のラジオボタンやチェックボックスがチェックされている時にだけバリデーションを行います

rules: {
  my_name : { required: '#foo:checked' } 
} ,

次のような指定方法があります

指定値 説明
#foo:checked id="foo" のラジオボタンやチェックボックスがチェックされている時
#foo:filled id="foo" のフォーム要素に何か文字(空白以外)が入力されている時
#foo:visible id="foo" のフォーム要素が表示されている時

● バリデーション required 条件の条件分岐2

rules: {
  my_name : { required: function() { return ($('#my_flg').val() === '1' ); } } 
} ,
messages: {
  my_name: { required: 'my_flgが『1』の時はmy_nameは空欄にはできません' } 
}

関連エントリー

No.928
08/07 12:09

edit

フォーム
jQuery
エラー対処