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 ){
            return true;    // trueが返るとエラーとならない
        }
    else{
        return false;    // falseが返るとエラー
    }
}, 'デフォルトのエラーメッセージ');

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

標準ではエラー時にフォーム要素に error というクラスが付加されますが、これがいらない場合は

空のfunction() を定義します。

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

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

バリデーションの実行タイミングは

・フォーム Submit時

・エラー後のフォーム内容変更時

ですが、任意のタイミングでバリデーションを実行するには valid()メソッドを実行すればOK。

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

■ バリデーションの条件分岐

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

関連エントリー

No.928
07/14 10:58

edit

フォーム
jQuery