読者です 読者をやめる 読者になる 読者になる

まったり坂をのぼりたい。

忘れたときに見る。思い出したら書く。おおざっぱな備忘録。

jQuery Validation Pluginを使う

formをリアルタイムでチェックしたい

jQuery Validation Pluginを使うと簡単にformのチェックができます。
jQuery Validation Plugin | Form validation with jQuery

基本的な使いかた

※簡略化したのでおかしなところがあるかもしれないです。

html

<form id="FormId" action="">
  <label for="InputId">メールアドレス</label>
  <input id="InputId" name="input_name">
  <p class="error_txt"></p>
  <button id="button" type="submit">送信</button>
</form>

js

//バリデートルールの定義
var methods = {
  email: function(value, element) {
    return this.optional(element) ||/^[\w.!#$%&'*+\/=?^`{|}~-]+@[\w-]+\.[\w.-]+$/.test(value);
  },
  nonSpaceOnly: function(value, element){
    return this.optional(element) ||/[^\u0020\u3000]/.test(value);
  }
}

//メソッドの追加(methodsを適応)
$.each(methods, function(key) {
  $.validator.addMethod(key, this);
});

//inputにルールの適応
var rules = {
  input_name:{
    required:true,
    email: true,
    nonSpaceOnly:true
  }
};

//inputのエラーメッセージ
var messages = {
  input_name:{
    required:"必須項目です",
    email: "正しいメールアドレスを入力してください",
    nonSpaceOnly:"空白のみの入力はできません"
  }
};

//フォームをバリデーション
$("FormId").validate({
  rules: rules,
  messages: messages,
  //フォーカスアウトでバリデーション
  onfocusout: function(element) {
    if (!this.checkable(element)){
      this.element(element);
    }
  },
  //エラー文を出す場所を指定
  errorPlacement: function(error, element) {
    error.appendTo(element.find(".error_txt"));
  }
});

標準のエラーメッセージ日本語化

DLしてきたファイルの
dist/localization/messages_ja.min.js
を読み込めばok

あとからルールの追加・削除

選択肢によって必須・任意の切り替えをするなど
あとからルールの追加・削除をするときは以下の関数を使います。
ルールを追加するときは次の関数を使います。

  $("#InputId").rules("add", {
    required: true,
    nonSpaceOnly:true
  });

ルールを削除するときは次のように記述します。

$("#InputId").rules("remove","required nonSpaceOnly");

ルールを追加する前に削除しようとするとエラーになります。

参考

下のサイトの方が詳しく載ってます。
Documentation | jQuery Validation Plugin
jQuery Validate Pluginの解説とValidate 日本語環境用PluginとjQuery Form Pluginとの連携 - くらげだらけ
【JavaScript】【jquery】jquery.validate.jsの基本的な使い方 - 駆け出しプログラマの備忘録
jQuery Validation Plugin 簡単な使い方まとめ - Qiita