独自バリデーション

標準にはない独自のバリデーションを定義する方法を解説します。

独自バリデーションとは

標準的なバリデーションにない独自のルールで入力条件チェックをする仕組みです。標準のバリデーションと同じ使用感で使うことができます。

例えば、テキストフィールドで日付入力を求める場合、「20XX/XX/XX」のように2000年代で且つ区切りが / (スラッシュ) を入力条件にしたいとしましょう。つまり、入力文字列の年が2000年代でなかったり区切りが / でない場合にエラーを出したいとします。

そんな条件チェックをしてくれる date2000slash というクラスがあれば、以下のような書き方ができて便利です。

<div>日付</div>
<div><input type="text" name="ymd" class="espf-required espf-date2000slash" /></div>
<div class="espf-e-ymd-required" style="color:red;">必須項目です</div>
<div class="espf-e-ymd-date2000slash" style="color:red;">年は2000年代にして年月日の区切りは / にして下さい</div>

required クラスは標準で存在しますが、残念ながら date2000slash というバリデーションクラスは存在しません。このような特殊なバリデーションを、無ければ作ってしまえと自分で定義できるのが独自バリデーションです。

独自バリデーションを定義する

独自バリデーションは簡単に作ることができます。

バリデーションクラス名 と バリデーション関数 をグローバルオブエジェクト espar_form 内に記載します。以下は、上記の例 date2000slash を定義している例です。

    var espar_form = {
        espfDemo: {
            api_key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
            debug: true
        },
        validators: {
            "date2000slash": function(value) {
                // 20で始まり4桁/2桁/2桁の年月日表記の正規表現にマッチすればtrueを返す
                return value.match(/^20[0-9]{2}\/(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])$/);
            }
        }

espar_form オブジェクト内に validators というキーを定義し、バリデーションクラス名がキーでバリデーション関数が値となる key-value オブジェクトを指定します。バリデーション関数が false を返す時にエラークラスが発動します。バリデーション関数の引数には、フォームの入力値が格納されています。

独自バリデーションは複数定義することができます。

変数付き独自バリデーション

標準バリデーション maxlength では1つの引数を指定することができて、「最大文字数100」を espf-maxlength-100 というクラスで記載できます。このようなバリデーションと同様に、引数を指定できる独自バリデーションを定義することもできます。

以下は、入力された文字列が「指定バイト数以下である」という条件でチェックするバリデーションを定義している例です。

    var espar_form = {
      espf: {
        api_key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        debug: true
      },
      validators: {
        // 入力項目に設定するクラスは espf-maxByteLength-バイト長
        "maxByteLength": function (value, param) {
          return (new Blob([value])).size <= Number(param);
        }
      }
    };

バリデーション関数の2つ目の引数に引数が渡されます。上の例で定義した maxByteLength クラスは、以下のように使用できます。

<div>会社名</div>
<div><input type="text" name="company" class="espf-required espf-maxByteLength-30" /></div>
<div class="espf-e-company-required" style="color:red;">必須項目です</div>
<div class="espf-e-company-maxByteLength-30" style="color:red;">会社名の文字列は30バイト以下にして下さい</div>