HTML コード

ここにあります。新しい属性を持つ HTML5 フォーム:

<form id="myform">
<form id="myform" class="cols">
  <h3>カスタム入力を備えたHTML5フォーム</h3>
 
  <fieldset>
    <label> email * <input type="email" required="required" minlength="9" /> </label>
    <label> username * <input type="text" name="username" minlength="5" /> </label>
    <label> Password <input type="password" name="password" minlength="4" /> </label>
    <label> Password check <input type="password" name="check" data-equals="password" /> </label>
  </fieldset>
 
  <fieldset>
    <label> website * <input type="url" required="required" /> </label>
    <label> name * <input type="text" name="name" required="required" maxlength="30" /> </label>
    <label> age <input type="number" name="age" size="4" maxlength="3" /> </label>
    <label> time <input type="time" name="time" maxlength="8" /> </label>
  </fieldset>
 
  <div class="clear"></div>
 
  <button type="submit">Submit form</button>
</form>

カスタム バリデータ

このツールにより、新しい属性や入力タイプを実装することは非常に簡単です。 各新規属性と入力タイプは、新しいカスタム・バリデータ関数を必要とします。 それらは、$.tools.validator.fn メソッドによって、 バリデータツールに追加されます。

時間入力タイプ

時間入力はHTML5標準に属します。ここでは、それを実装します。 妥当な入力は、2つの数字の後に ":" が続き、その後へまた2つの数字が続きます。例えば: 12:44

  // 値が妥当かどうかをテストする正規表現
  $.tools.validator.fn("[type=time]", "Please supply a valid time", function(input, value) {
    return /^\d\d:\d\d$/.test(value);
  });

これは、カスタムバリデータを定義するための最も一般的な方法です。 最初の引数は、検証したいすべての入力に一致します。 ここでは、type 属性が "time" に等しい入力フィールドを選択します。 2番目の引数は、検証が失敗した場合に表示するエラーメッセージです。 3番目の引数は、実際のバリデータ関数で、値が妥当である場合は true を返さなければなりません。 値は、バリデータ関数の2番目の引数へ渡されます。

data-equals 属性

次のバリデータは、或るフィールドの値が、他のフィールドの値に等しいことを確実にします。 例えば、data-equals="password" は、値が "password" と名付けられたフィールドに 等しくなければならないことを意味しています。 data- 接頭辞は、それを妥当なHTML5にします。

  $.tools.validator.fn("[data-equals]", "Value not equal with the $1 field", function(input) {
    var name = input.attr("data-equals"),
    field = this.getInputs().filter("[name=" + name + "]");
    return input.val() == field.val() ? true : [name];
  });

ここでは、エラーメッセージ内に後方参照 $1 を見ることができます。 これは、検証に失敗した場合、バリデータ関数の戻り値によって置き換えられます。 ゼロ個以上の後方参照を持つことができ、配列内に含まれる必要があります。 また、バリデータ内の this は、validator APIへの 参照であることに注意してください。

minlength 属性

ここでは、非標準の属性 minlength を使用しています。 カスタム属性を作るときは、あなたが好きな任意の属性名を使用することができます。 欠点は、カスタム名がHTML バリデータを通らないということです。しかし、 理想的な世界では、 これはそうであるべきではありません。

  $.tools.validator.fn("[minlength]", function(input, value) {
    var min = input.attr("minlength");
 
    return value.length >= min ? true : {
	    en: "Please provide at least " +min+ " character" + (min > 1 ? "s" : ""),
	    fi: "Kentän minimipituus on " +min+ " merkkiä"
    };
  });

今回は、エラーメッセージを返すのに、第2引数を使用していません。 これにより、メッセージを動的に構築する可能性が与えられます。 英語と仮定される簡単なな文字列を返すか、または、オブジェクトを返すことができます。

ローカライゼーション

ここでは、$.tools.validator.localizeFn をコールし、入力した時間をローカライズします。

    $.tools.validator.localizeFn("[type=time]", {
    en: 'Please supply a valid time',
    fi: 'Virheellinen aika'
    });

ここに、Firebug のコンソールから見た、 バリデータの内部に含まれる全てのメッセージがあります。

カスタムバリデータとローカライズの詳細については、バリデータ・ドキュメント を読んでください。

バリデータの初期化

カスタム・バリデータが定義したら、フォームの検証を初期化します。 offset コンフィギュレーション変数を使用して、エラー メッセージの位置を調整します:

    $("#myform").validator({
    position: 'top left',
    offset: [-12, 0],
    message: '
' // em element is the arrow
    });

<!-- same styling as in minimal setup -->
<link rel="stylesheet" type="text/css"
      href="/media/css/validator/form.css"/>
 
<!-- override it to have a columned layout -->
<link rel="stylesheet" type="text/css"
      href="/media/css/validator/columns.css"/>

/* pure CSS arrow */
.error em {
  display:block;
  width:0;
  height:0;
  border:10px solid;
  border-color:#FFFE36 transparent transparent;
 
  /* positioning */
  position:absolute;
  bottom:-17px;
  left:60px;
  }