2008年11月6日木曜日

"jQuery Validate プラグイン"と"jQuery Form プラグイン"のあわせ技

スズキです。

表記のプラグイン、別々には紹介していたのですが、
基本的にあわせ技で使うことが多いはずなので、
サンプルコードをメモしておきます。

▼jQuery Validate プラグイン
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
▼jQuery Form プラグイン
http://www.malsup.com/jquery/form/

まずはHTMLですが、必要なJavaScriptを読み込んで、
formを作る形になります。(nameの設定を忘れないように)
--------【HTML】--------
<head>
  <script type="text/javascript"
      src="JS/ext/jquery.js"></script>
  <script type="text/javascript"
      src="JS/ext/validate.js"></script>
  <script type="text/javascript"
      src="JS/ext/messages_ja.js"></script>
  <script type="text/javascript"
      src="JS/ext/form.js"></script>
  <script type="text/javascript"
      src="JS/app/validate-form.js"></script>
</head>
<body>
  <div id="form">
    <form>
      <dl>
        <dt>タイトル</dt>
        <dd>
          <input type="text" name="title"/>
        </dd>
        <dt>URL</dt>
        <dd>
          <input type="text" name="url"/>
        </dd>
          <dt>コメント</dt>
        <dd>
          <textarea name="comment"></textarea>
        </dd>
      </dl>
      <div class="control">
        <input type="submit" value="追加"/>
        <input type="reset" value="リセット"/>
      </div>
    </form>
  </div>
</body>
--------

上記のHTML(form)に対して、下記JavaScriptを適用させます。
--------【Javascript】--------
// validateの設定
var param = {
  rules: {
    title: {
      required: true
    },
    url: {
      required: true,
      url: true
    },
    comment: {
      required: true
    }
  },
  submitHandler: function(form){
    // formの設定
    var option = {
      url: "PHP/app/validate-form.php",
      type: "GET",
      dataType: "json",
      success: function(json, status) {
        alert(json);
      }
    };
    $(form).ajaxSubmit(option);
  }
};
$("#form form").validate(param);
--------

基本的に、Validateプラグインのやり方がベースになり、
Formプラグインに関しては、Validateプラグインのパラメータの
submitHandlerで設定する形になります。

submitHandlerはSubmitボタンが押されたときに実行される
処理を書くのですが、引数にformの内容が入ったものが
与えられるので、それに対してFormプラグインの
ajaxSubmitメソッドを実行させることになります。

ajaxSubmitメソッドの引数には、ajaxFormと同じパラメータを
設定することができます。

この組み合わせ、強力すぎです。

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

0 コメント: