jQuery.validationプラグインのハックテクニックをご紹介します。
jQuery.validationプラグインはフォームのバリデーションを簡単に行う事ができ、プロジェクトでとても重宝しているプラグインの１つです。
ただし、複雑なバリデーションを行おうとするとなかなか難しいです。
１つのインプットデータ、あるいは複数のチェックボックスなどをひとまとめにしたものに対してバリデーションを行う場合はプラグインの守備範囲なのですが、以下のような場合に急に難しくなります。
１：１つのフォームが他のフォームの内容に複雑に関係するバリデーション
例えば「３つあるラジオボックスの１つ目をチェックした時はアルファベットのみ、二つ目をチェックした時でかつ別のチェックボックスをチェックした時はひらがなのみ」など
２：フォームの内容ではなく画面の状態などをバリデーションしたい場合や
３：BackboneJSなどでデータを保持している場合
データ入力にリッチなUIを実装しようとするとフォームだけでは難しくなります。そこでデータをjsonなどで保持することになりますが、フォームの内容とjsonの内容の両方に対してバリデーションし、エラーの表示をjQuery.validationで統一しようとする場合、どうしてもbeforeValidationイベントが欲しくなりますが存在しません。http://jqueryvalidation.org/validate/
下記CoffeeScriptですが、まずaddMethodでメソッドを追加します。
beforeValidation ->
#something code
$.validator.addMethod 'beforeValidation' (value, element, param) ->
beforeValidation() #スコープに注意
return true #常にtrueを返す
そしてダミーのinputタグを用意する
<input name="beforeValidation" type="hidden" />
#readyのあとで
options = {
rules: {
'beforeValidation': {#このルールを必ず初めに記述する
beforeValidation: true
}
}
}
$form.validate(options)
jQuery.validationプラグインがフォームをvalidateする際に必ずbeforeValidationを初めに行ってくれるので、実質beforeValidationイベントがトリガーできます。
ここでjsonのデータをチェックして、ゴニョゴニョしてします。
例えばエラーを表示する為だけにinput[type=”hidden”]を用意し、エラーがみつかったら値を空に、エラーが無ければ”ok”とか適当な値を入れて、requiredをあらかじめrulesに入れておけばOKです。
