@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

jQueryのValidationプラグインでformをサブミットしないようにする

jQueryプラグインでValidationプラグインがあります。クライアントチェックをする上で非常に便利なプラグインですね。
しかし、jQueryAjaxなアプリを作っていると、画面遷移をしないようにするために、formタグを書かない事がありますが、Validationプラグインを使うとformタグを書かなければなりません。
formタグがあるとjQuery.ajax()を読んだ後にformをPOSTしたりGETしたりしてしまいます。これは望ましくない。

$('#registerForm').validate();
$('#registerButton').submit(function() {
  $.ajax({
    // parameter set
  })
  .done(onRegister)
  .fail(onError);
});

このようにしたいのですが、formをサブミットしてしまうんですね。困ったので、ドキュメントを見ると、submitHandlerのオプションがありました。ここでごにょってやればいいようです。

$('#registerForm').validate({
  submitHandler: function(form) {
    $.ajax({
      // parameter set
    })
    .done(onRegister)
    .fail(onError);
    return false;
  }
});

submitHandlerでAjax通信をして、return false;のようにしていればformをサブミットしません。
逆にサブミットしたい場合には、return false;の代わりに$(form).submit();をすれば良いようです。