jquery.validate.jsでajax使用時の入力チェックをしてみた

最近の内容はjQueryやjavascript絡みばかりになってるけど一番書きやすい事が分かりました。
これでSymfony2がまた遠ざかってしまう。。。

というわけでまたjquery.validate.jsのお出ましですけど、
以前id:amidaike:20130318はエラーメッセージを変更してみましたけど、
今回はajaxを使った時の入力チェックてどうするんだとふと思ったのでやってみますたﾉｼ

どういうことかというと、ページ遷移がある画面なら

$(function() {
  $("#login-form").validate({
    rules: {
      'email': {
        required: true
      }
    }
  });
});

とこれだけ書けばsubmitされてもエラーがあれば処理を中断してくれるんだけど、
画面遷移をしない画面でajaxを使った場合、こんな感じで処理をしようとしたら、、、

$(function() {
  $("#login-form").validate({
    rules: {
      'email': {
        required: true
      }
    }
  });

  $("#login-btn").click(function() {
    $.ajax({
      url: "/hoge.php"
      type: 'post'
      dataType: 'json',
      data: {
        'email': email,
      }
      success: function(data) {
      }
    });
  });
});

エラーがあってもhoge.phpが実行されてしまいます。
そんな時はどうするかというと、valid()関数というのがjquery.validateに用意されているのでそれを使って処理を中断させます。

で、上記のコードを修正したajaxを使った入力チェックはこんな感じ

$(function() {
  $("#login-btn").click(function() {
    $("#login-form").validate({
      rules: {
        'email': {
          required: true
        }
      }
    });

    if (!$("#login-form").valid()) {
      return false;
    }

    $.ajax({
      url: "/hoge.php"
      type: 'post'
      dataType: 'json',
      data: {
        'email': email,
      }
      success: function(data) {
      }
    });
  });
});

上記にあるとおりvalidateを使う箇所はclick関数へ含め、valid関数を

if (!$("#login-form").valid()) {
  return false;
}

というようにチェックすると入力エラーがあってもhoge.phpへ処理されなくなります。
これできちんとエラーメッセージも表示されますよっと。

こんな事書かなくてもみんな知ってるか。
他にもいい方法があるのか知らないけど今回のプロジェクトではこの方法でチェックしてますよﾉｼ