開発者ブログ
HTML5資料室 » jQuery Validation Plugin

jQuery Validation Plugin

Last modified by kashi on 2016/01/08, 19:37
資料目次

jQuery Validation Pluginとは

FORM要素内の入力部品に入力された値が正しいかを、指定したルールに基づいてチェックを行うライブラリです。

主な機能

  • Submitイベント時のバリデーションの実行
  • 入力内容変更時のバリデーションの実行
  • カスタムバリデータの追加・削除
  • エラーメッセージの追加・削除
  • フォームの先頭(指定可)にエラーメッセージを一括表示
  • エラーメッセージを任意の位置(要素)に表示
  • バリデーション後、Submitを実行させない (デバッグモード)
  • フォーカスが当たったときに、表示中のエラー内容をクリアできる
  • エラーメッセージをどの要素でラップするか
  • 依存条件を指定できる
  • 以下のタイミングをコールバックメソッドでフックすることができる
    • 全体に対してバリデートを実行してエラーが見つかった場合
    • Submitイベントをする直前
    • 入力後直後にエラーのあるが見つかった場合
    • 入力直後にエラーが解消された場合

基本的な使い方

  • HTML

<form method="post" action="/regist" id="form1">
    姓:<input type="text" name="firstname">
    名:<input type="text" name="lastname">
   <br>
   <div>1.現在服用しているお薬はありますか？
   <input type="radio" value="1" name="medicine_conf">ある
   <input type="radio" value="0" name="medicine_conf">ない
   <br>
   <div>
         ※1.で「ある」と選択した方のみ。<br>
         服用しているお薬の名称を全て入力して下さい。
   </div>
   <textaria name="medicine_name">
   <p>
   <input type="submit">
</form>
  • JavaScript
$('#form1').validate({
      rules: {
        firstname: {
          required: true
        },
        lastname: {
          required: true
        },
        medicine_name: {
          required: {
            depends: '#medicine_conf[value="1"]:checked'
          },
          maxlength: {
            param: 10000,
            depends: '#medicine_conf[value="1"]:checked'
          }
        }
      },
      messages: {
        firstname: {
          required: '名を入力して下さい'
        },
        lastname: {
          required: '姓を入力して下さい'
        },
        medicine_name {
          required: 'お薬の名称を入力して下さい',
          maxlength: '{0}字以下で入力して下さい'
        }
      }
});

validate()でバリデータを初期化します。
パラメータには、ルールやエラーメッセージ等のパラメータを指定することができます。
rulesプロパティには、バリデーションのルールを定義します。
messagesプロパティには、バリデーションエラー時に画面上に表示するメッセージを定義します。

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

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

min, max, minlength, maxlength, range, rangelengthルールにdependsプロパティを指定する場合

これらのルールにdependsを指定する場合、範囲や上限下限の値はparamプロパティに指定します。(上記サンプルコードのmedicine_nameを参照)

メッセージを可変で表示したい場合

messagesプロパティ内の値に、メッセージ文字列を返す関数を指定します。

$('#form1').validate({
      rules: {
        mailaddress: {
          required: true,
          mail: true
        }
      },
      messages: {
        mailaddress: {
          required: 'メールアドレスを入力して下さい',
          mail: function(params, el) {
           return $.validator.format('{0}は不正な値です', el.value);
          }
        }
      }
});

デフォルトのバリデーションルール

デフォルトで用意されている、rulesプロパティに指定できるバリデーションルールの一覧

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

dateの仕組み

既存ルールのdateは、入力値をjavaScriptのDate型で生成します。（newします。）
正しくDateオブジェクトが生成できた場合に真（true）を返し、invalidになった場合に偽（false）を返す仕組みです。

javaScriptのDate型は正しい日付ではない値でも、Dateオブジェクトが生成される場合があるので注意が必要です。（以下参照）

var d = new Date('2');
 alert(d.toString());  //Thu Feb 01 2001 00:00:00 GTM+0900(東京(標準時))

また、実際には存在しない31日を入力すると自動で翌月の1日へ変換されます。（invalidにはなりません。）

var d = new Date('2013/09/31'); // 9月は30日まで。31日は存在しない。
 alert(d.toString()); // The Oct 01 2013 00:00:00 GTM+0900(東京(標準時))

jQuery Validation Plugin Date
http://jqueryvalidation.org/date-method

dateISOの仕組み

dateISOは、入力値が以下正規表現に沿っている場合真（true）を返し、それ以外は偽（false）を返します。

//数値4桁、区切り文字、数値2桁、区切り文字、数字2桁 の文字列であること。
 //区切り文字は / または - であること。
 /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/

この正規表現では以下が全て真（true）になり厳密な日付チェックができないので注意が必要です。

var date1 = '0000/00/00'; //正しくない日付
 alert(/^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/.test(date1));  // true
  
var date2 = '2013-09/06' //区切り文字に - と / が混在している
 alert(/^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/.test(date2));  // true

jQuery Validation Plugin dateISO
http://jqueryvalidation.org/dateISO-method/

その他操作

バリデーションルールの追加

validate()で初期化後、あとからバリデーションルールを追加するには、addClassRules()で定義します。

jQuery.validator.addClassRules(name, rules)

パラメータ名型説明
nameString対象とする入力要素のname属性の値
rulesObjectバリデーションルール
jQuery.validator.addClassRules("mailAddress", {
  required: true,
  email: true
});

jQuery.validator.addClassRules(rules)

パラメータ名型説明
rulesObjectキーにnameを、値にバリデーションルールを持つオブジェクト
jQuery.validator.addClassRules({
  mailAddress: {
    required: true,
    email: true
  }
});

カスタムバリデータの追加

独自のバリデータを登録するには、addMethod()を使用して入力値を検証するためのメソッドを登録します。

jQuery.validator.addMethod(name, method [, message ])

パラメータ名型説明
nameStringルール名
method(value, element, params)Function検証を行うためのロジック(値が有効な場合はtrueを無効な場合はfalseを返すこと)
パラメータ
  value: 入力された値
  element: バリデート対象の要素
  params: ルール設定時に設定された値
(例えば、ルールに『rengelength: [10, 20]』(10以上20以下)と指定した場合、paramsには[10,20]の値が入ってくる
messageStringバリデーションエラー時にデフォルトで表示するメッセージ

以下のコードは入力値が整数であるかを検証しています。

jQuery.validator.addMethod("integer", function(value, element) {
return this.optional(element) || /^-?\d+$/.test(value);
}, "整数で値を入力して下さい");

日付の検証をカスタムバリデータで追加する例

既存ルールのdate, dateISOでは厳密なチェックを行うことは難しいので、日付の検証は
カスタムバリデータを追加することを推奨します。

例）入力された日付フォーマットが「yyyy/MM/dd」 かつ 正しい日付であることをチェックする

   jQuery.validator.addMethod('customDate', function(value, element) {

    var PTN_YYYYMMDD = /^\d{4}\/\d{2}\/\d{2}$/;
    var DATE_DELIMITER = '/';

    var date = new Date(value);

    var optional = this.optional(element);
    if (optional) {
      return optional;
     }

    // invalidな日付または、フォーマット通りに入力されていない場合はNGとなる
     if (/Invalid|NaN/.test(date.toString()) || !PTN_YYYYMMDD.test(value)) {
      return false;
     }

    // 入力値とnewDate.toStringを文字列比較する。
     // 実際には無い日付（2013/04/31）をnewDateすると勝手に変換（2013/05/01）するのでその対策。
     // なお、31日だけこの現象が起こる。32日以降はnewDateでもinvalid判定になる。
     var m = '0' + (date.getMonth() + 1);
    var d = '0' + date.getDate();
    var newDateStr = date.getFullYear() + DATE_DELIMITER + m.slice(-2) + DATE_DELIMITER + d.slice(-2);

    return newDateStr === value;

   }, '正しい日付を入力してください。');

任意のタイミングによるバリデート

valid()を実行することで、Submitイベント以外のタイミングでもバリデーションを実行することができます。
ただし、valid()を実行するまえにvalidate()で初期化を行う必要があります。

<form method="post" action="/regist" id="form1">
   <input type="text" name="firstname">
   <input type="text" name="lastname">
</form>
<input type="button" id="btn1" />
var $form = ('#form1');

$form.validate({
      rules: {
        firstname: {
          required: true
        },
        lastname: {
          required: true
        }
      },
      messages: {
        firstname: {
          required: '名を入力して下さい。'
        },
        lastname: {
          required: '姓を入力して下さい。'
        }
      }
});

$('#btn1').click(function() {
    $form.valid();
});

「どちらか片方必須」な入力項目を作成する

rulesで指定するバリデーションメソッドにrequire_from_groupを指定すると、自宅電話番号と携帯電話番号の様な、両方の項目が必須では無いがどちらか片方は必須、という入力項目が作成できます。

<form method="post" action="/regist" id="form1">
 <input type="text" class="input-group-phone" name="phoneHome">
 <input type="text" class="input-group-phone" name="phoneMobile">
</form>
$('#form1').validate({
   "rules": {
       "phoneHome": {
           // ".input-group-phone"フィールドが1つ以上入力されていればOK
            "require_from_group": [1, '.input-group-phone']
        },
       "phoneMobile": {
           "require_from_group": [1, '.input-group-phone']
        }
    }
});

※※※
require_from_groupは標準バリデーションではありません。利用する場合additional-methods.jsを読み込む必要があります。

特定の状況のみ検証を行う

他の入力項目の状況等に応じてValidationを有効にする場合、 dependsを指定するとその要素が入力値検証に成功した場合のみ、自分の入力値検証を行う。また、関数を指定すると、返り値でtrue/falseを判別して実行する/しないを切り替えることができる。
$(form).validate({
    rules: {
        text1: {
            required: {
               // あるチェックボックスがONの場合のみ
                depends: function (element) {
                   return $('#checkbox').is(':checked');
                }
            }
        },
        text2: {
            required: {
               // text1の入力値検証に成功している場合のみ
                depends: 'input[name="text1"]'
            }
        },
        number1: {
            required: true,
            min: {
               // dependsを設定し、かつ検証パラメーターも設定する場合
                params: 15,
                depends: 'input[name="text2"]'
            }
        }
    }
});

全てのエラーメッセージをフォームの上に表示する

個々のフィールドの直後に表示されるエラーメッセージを一箇所に集約する場合、 errorLabelContainer を設定します。同時に wrapper を設定することでリスト表示が可能となります。

<ul id="errors"></ul>
<form method="post" action="/regist" id="form1">
 <input type="text" id="text1" name="text1">
 <input type="text" id="text2" name="text2">
</form>
$('#form1').validate({
   "rules": {},
   "errorLabelContainer": $('#errors'),
   "wrapper": 'li'
});

エラー表示時は以下の様なHTML構造になります。

<ul id="errors">
 <li><label for="text1" class="error">エラーメッセージ１</label></li>
 <li><label for="text2" class="error">エラーメッセージ２</label></li>
</ul>
<form method="post" action="/regist" id="form1">
 <input type="text" id="text1" name="text1">
 <input type="text" id="text2" name="text2">
</form>

jQuery Validation Pluginでできないこと

  • 1つの項目に2つ以上のエラーがあったときに、そのエラーを全て表示する

使用する上で気を付けること

チェックボックスにrangelength、maxlength, minlength指定しても、バリデーションが動作しない

専用のカスタムバリデータを作成する必要がある

input[type="checkbox"]またはinput[type="radio"]の要素の場合、1度submitを行わないと入力値を変更してもバリデータが実行されない

submitせずに最初からバリデートを実行したい場合は、checkboxのclickイベントやradioのchangeイベントを拾って、入力要素ごとにvalid()を呼ぶ必要がある。

hifiveとの連携

__readyのタイミングで、jQuery Validation Pluginのvalidate()を実行し初期化を行う。
その際、highlight、unhighlight、submitHandler、invalidHandler、successには、ownWithOrg()でラップしたコントローラのメソッドをハンドラに指定する。

$(function() {
  h5.core.controller('body', {
    __name: 'sample.plugin.validationSampleController',
    __ready:function() {
     this.$find('#form1').validate({
        rules: {
          ...
        },
        messages: {
          ...
        },
        highlight: this.ownWithOrg(this.highLightArea),
        unhighlight: this.ownWithOrg(this.unHighLightArea),
        submitHandler: this.ownWithOrg(this.submitHandler),
        invalidHandler: this.ownWithOrg(this.invalidHandler),
        success: this.ownWithOrg(this.successHandler)
      });
    },
   /**
     * 入力項目でエラーがあったときに実行されるハンドラ
     */
    highLightArea: function(orgThis, el, error, errorClass) {
      ...
    },
   /**
     * エラーが解消されたときに実行されるハンドラ
     */
    unHighLightArea: function(orgThis, el, error, errorClass) {
      ...
    },
   /**
     * validateのチェックが通り、submitが行われるときに実行するハンドラ
     */
    submitHandler: function(orgThis, form, ev) {
      ...
    },
   /**
     * validateでエラーが1つでもあると実行されるハンドラ
     */
    invalidHandler: function(orgThis, ev, validator) {
      ...
    },
   /**
     * 入力項目でエラーが解消されるたびに実行されるハンドラ
     */
    successHandler: function(orgThis, errMsgElement, inputElement) {
      ...
    }
  });
});

jQuery Validation Pluginを使用したサンプル

サンプルはこちら

Copyright (C) 2012-2017 NS Solutions Corporation, All Rights Reserved.