前回のMootoolsのForm.Validater.Inlineを使用する際のスタイル付けについてでスタイル付けについて解説しましたが、今回はForm.Validater.Extraについて説明します。

Form.Validater.ExtraをForm.Validaterに含まれない特殊なバリデータを使用できるようになります。
特定の入力フィールドの入力チェックの有効化／無効化、日付の期間チェックなどを利用することで複雑な入力チェックを行えるようになります。

下記にForm.Validater.Extraに含まれるバリデータの説明を記載します。

バリデータ一覧

validate-nospace

スペースが入力されているかチェックします。

<input type="text" name="validate-nospace" value="" class="validate-nospace" />

validate-enforce-oncheck

チェック時に指定したフィールドの入力チェックを有効にします。

toEnforceプロパティとenforceChildrenOfプロパティを使用して適用するフィールドを指定することができます。

• toEnforceプロパティを使用する場合
  次の場合、id属性がname-to-enforce,email-to-enforce,phone-to-enforceに適用されます。

  <label><input type="checkbox" class="validate-enforce-oncheck toEnforce:['name-to-enforce','email-to-enforce','phone-to-enforce']" value="1" />&nbsp;有効にする</label>
  

• enforceChildrenOfプロパティを使用する場合
  次の場合、id属性がto-enforceの子要素input,select,textareaに適用されます。

  <label><input type="checkbox" class="validate-enforce-oncheck enforceChildrenOf:'to-enforce'" value="1" />&nbsp;有効にする</label>
  

validate-ignore-oncheck

チェック時に指定したフィールドの入力チェックを無効にします。

toIgnoreプロパティとignoreChildrenOfプロパティを使用して適用するフィールドを指定することができます。

• toIgnoreプロパティを使用する場合
  次の場合、id属性がname-to-ignore,email-to-ignore,phone-to-ignoreに適用されます。

  <label><input type="checkbox" class="validate-ignore-oncheck toIgnore:['name-to-ignore','email-to-ignore','phone-to-ignore']" value="1" />&nbsp;有効にする</label>
  

• ignoreChildrenOfプロパティを使用する場合
  次の場合、id属性がto-ignoreの子要素input,select,textareaに適用されます。

  <label><input type="checkbox" class="validate-ignore-oncheck ignoreChildrenOf:'to-ignore'" value="1" />&nbsp;有効にする</label>

validate-toggle-oncheck

チェック時に指定したフィールドの入力チェックを有効/無効を切り替えます

toToggleプロパティとtoToggleChildrenOfプロパティを使用して適用するフィールドを指定することができます。

• toToggleプロパティを使用する場合
  次の場合、id属性がname-to-toggle,email-to-toggle,phone-to-toggleに適用されます。

  <label><input type="checkbox" class="validate-toggle-oncheck toToggle:['name-to-toggle','email-to-toggle','phone-to-toggle']" value="1" />&nbsp;有効にする</label>

• toToggleChildrenOfプロパティを使用する場合
  次の場合、id属性がto-toggleの子要素input,select,textareaに適用されます。

  <label><input type="checkbox" class="validate-toggle-oncheck toToggleChildrenOf:'to-toggle'" value="1" />&nbsp;有効にする</label>
  

validate-required-check

チェックボックスのチェックを必須にする

<label><input type="checkbox" class="validate-required-check msgPos:'agreeContainer'" value="1" />&nbsp;同意する</label>

validate-reqchk-bynode

チェック時に指定したチェックボックス/ラジオボタンの入力を必須にする

nodeIdプロパティとselectorプロパティを使用して適用するチェックボックス／ラジオボタンを指定することができます。

• nodeIdプロパティを使用した場合
  次の場合、id属性がcheckboxesByNodeのチェックボックス/ラジオボタンに適用されます。

  <label><input type="checkbox" class="validate-reqchk-bynode nodeId:'checkboxesByNode' msgPos:'checkboxesByNodeContainer'"/>&nbsp;すべてのチェックボックス／ラジオボタン<label>
  

• selectorプロパティを使用した場合
  次の場合、id属性がcheckboxesByNodeのチェックボックスに適用されます。

  <label><input type="checkbox" class="validate-reqchk-bynode nodeId:'checkboxesByNode' selector:'checkboxesByNode input[type=checkbox]' msgPos:'checkboxesByNodeContainer'"/>&nbsp;すべてのチェックボックスのみ</label>
  

validate-reqchk-byname

チェック時に指定したname属性と一致する要素を必須にします。

groupNameプロパティに対象の要素名、labelプロパティにはエラーメッセージに表示するグループ名称を指定します。

<label><input type="checkbox" class="validate-reqchk-byname label:'GroupA' groupName:'ck[]' msgPos:'checkboxesByNameContainer'" name="favoriteFlavor" />&nbsp;GroupAを選択させる</label>

validate-before-date

指定した日付以降の日付であるかチェックする

beforeElementプロパティに比較する入力フィールドのidを指定します。

<label>開始日: <input type="text" class="validate-date dateFormat:'%Y-%m-%d' validate-before-date beforeElement:'beforeDate'" value="2011-12-01" /></label><br />
<label>終了日: <input id="beforeDate" type="text" class="validate-date dateFormat:'%Y-%m-%d'" value="2010-12-01" /></label>

validate-after-date

指定した日付以前の日付であるかチェックする

afterElementプロパティに比較する入力フィールドのidを指定します。

<label>開始日: <input id="afterDate" type="text" class="validate-date dateFormat:'%Y-%m-%d'" value="2011-10-01" /></label><br />
<label>終了日: <input type="text" class="validate-date dateFormat:'%Y-%m-%d' validate-after-date afterElement:'afterDate'" value="2010-12-01" /></label>

validate-custom-required

入力されているのかをチェックします。未入力扱いの値を指定できます。

emptyValueプロパティに未入力扱いの値を指定します。

次の場合、value属性がnullの要素を未入力扱いにします。

	<select name="options" class="validate-custom-required emptyValue:'null'">
		<option value="null">Select One</option>
		<option value="1">options - 1</option>
		<option value="2">options - 2</option>
		<option value="3">options - 3</option>
	</select>

validate-same-month

指定した要素のと同月であるかチェックする

sameMonthAsプロパティに比較する要素のidを指定します。

<input type="text" class="validate-same-month sameMonthAs:'afterDate'" value="" />

validate-match

指定した入力フィールドと入力内容が等価であるかチェックします

matchInputプロパティに比較する要素のid、matchNameプロパティに入力フィールド名を指定します。

<input id="password" type="password" name="pass" value="" /><br />
<input type="password" name="pass-c" class="validate-match :'password' :'パスワード'" value="" />

validate-cc-num

クレジットカード番号であるかチェックします。

<input type="text" class="validate-cc-num" value="" />

最後にこれまでのデータをダウンロードできるようにしたので、ダウンロードして動作を確認するなどにご利用ください。
download example: form-validater-extra.zip

以上で終了です。