JSFのValidatorからクライアントサイドのValidatorとの連動


バグ修正しつつも、そろそろこれに着手.

今は当然のようにKumu.validateを出力するように考えています.

(追記)

Pageクラスを元に、クライアントサイドのValidatorの設定をJSONとして

HTMLに出力します。


イメージはこんな感じ.

public class HogePage {

  @Required(onClient=true)
  @Length(minimum=2, maximum=5, onClient=true)
  private Integer test;

  @Required(onClient=true)
  @RegularExpression(pattern='[A-Z]', onClient=true)
  private String test1;

}


というように書くと、

<script language="JavaScript" type="text/javascript" src="/teedaExtension/resources/org/seasar/teeda/ajax/js/kumu.js"></script>
<script language="JavaScript" type="text/javascript" src="/teedaExtension/org/seasar/teeda/ajax/js/event.js"></script>
<script language="JavaScript" type="text/javascript" src="/teedaExtension/org/seasar/teeda/ajax/js/validate.js"></script>

<script language="JavaScript" type="text/javascript">
Kumu.Validator.modeId(true);//idベースでのValidationにする

KumuValidatorConf = {
  test : ['Required','Integer','MinLength:2','MaxLength:5'],
  test1 : ['Required','RegularExpression:[A-Z]'],
  //test2 : {'RegularExpression:([a-z]){2}' : test },  //コールバックのところの記述が決まってない・・・
  doHoge : 'result', //submitボタンの無効化ON
  jumpCancel : 'result' //submitボタンの無効化ON
}

</script>
<input type="text" id="test" />
<input type="text" id="test1" />

<input type="submit" id="doHoge" value="submit"/>
<input type="submit" id="jumpCancel" value="cancel"/>


のように出力されます。


このような感じでClient側にもサーバサイドと同一のValidationがかかる仕組みです.

課題は、
・クライアントサイドで各項目に対してのValidationが失敗したときのcallback関数の定義の仕方
・submitボタンの無効化のON/OFF
・カスタムのValidatorを登録して使いたい場合にはどうするか
・エラーメッセージの共有化
・Kumu以外を使いたい場合の拡張性(しばらくなくて良いと思うけど)

ですね.

ご意見・ご感想お待ちしていますm(_ _)m