2010年1月4日月曜日

jQuery Validation Plugin & T2 & OVal

スズキです。

"jQuery Validation Plugin"には、remoteと呼ばれるメソッドがあり、
入力内容の有効性を逐次サーバに確認することができます。
http://docs.jquery.com/Plugins/Validation/Methods/remote#options

その、サーバ側を"T2 & OVal"でやってみよう、って試みです。(下記で実際に動いています)
http://feed.suz-lab.com/mypage/index.html
※ URL入力時に逐次サーバに有効性(Datastoreに存在しないか?)を確認しにいってます。

まず、HTMLとJavascriptはこんな感じです。

--------【index.html】--------
<form id="form" method="post" action="/mypage/index.json/addUrl">
  <input type="text" name="url" size="100"/><br />
  <input type="submit" value="登録"/><br />
  ...
</form>
--------
http://code.google.com/p/suz-lab-gae/source/browse/trunk/suz-lab-feed/war/WEB-INF/vm/page/other/mypage/index.html?r=104

--------【index.js】--------
$("#form").validate({
  rules: {
    url: {
      required: true,
      url : true,
      remote : {
        url : "/mypage/index.json/checkUrl",
        type: "post"
      }
    }
  },
  ...
});
--------
http://code.google.com/p/suz-lab-gae/source/browse/trunk/suz-lab-feed/war/other/js/app/mypage/index.js?r=105

remoteの項目で、アクセス先のURL(/mypage/index.json/checkUrl)と
メソッド(post)を指定しています。

アクセス先(/mypage/index.json/checkUrl)はT2で下記のように実装しており、
trueが帰ってくればOK、falseが帰ってくればNGと
"jQuery Validation Plugin"側で処理されます。

--------【IndexJson.java】--------
@Page("/other/mypage/index.json")
public class IndexJson {
...

  @Ajax
  @POST
  @ActionPath
  public Navigation checkUrl(@RequestParam("url") String url) {
    return StaticUtil.createValidationNavigation(IndexForm.class, "url", url);
  }

  public static class IndexForm {
    @NotBlank
    @AssertURL
    @NotExistsOnDatastore(kind="feed", property="url", type=Link.class)
    public String url;
  }

}
--------
http://code.google.com/p/suz-lab-gae/source/browse/trunk/suz-lab-feed/src/suz/lab/feed/page/other/mypage/IndexJson.java?r=105

URLのチェックは、すでにURLの追加処理時にFormクラス(IndexForm)を用意して、
OValでバリデーションするようにしていたので、その処理を利用するようにしました。

利用するフォームクラス、対象フィールドの名前、チェックする値、を引数にして、
こんな感じに処理しています。

--------【StaticUtil.java】--------
public static Json createValidationNavigation(Class<?> form, String
field, Object value) {
  try {
    Validator validator = new Validator();
    List<ConstraintViolation> violations = validator.validateFieldValue(
      form.newInstance(),
      form.getField(field),
      value
    );
    if(violations.size() == 0) {
      return Json.convert(true);
    } else {
      return Json.convert(false);
    }
  } catch(NoSuchFieldException e) {
    return Json.convert(false);
  } catch (InstantiationException e) {
    return Json.convert(false);
  } catch (IllegalAccessException e) {
    return Json.convert(false);
  }
}
--------
http://code.google.com/p/suz-lab-gae/source/browse/trunk/suz-lab-gae/src/suz/lab/gae/util/StaticUtil.java?r=105

冬休みを利用した、2010年に向けての予習は、これで終了です。
(本当はフィードがらみのWebサービスを作りたかったんだけど…)

--------
http://www.suz-lab.com

0 コメント: