こんにちは、Ryohei（@ityryohei）です！

jQuery Validation Pluginはフォームの入力値をリアルタイムに検証するjQueryのプラグインです。入力ルールを設定するだけでユーザの入力した内容をバリデーションしてくれます。エラーメッセージの表示は次の画面よりもその場で教えてあげる方が親切ですよね。入力段階でエラーメッセージを表示することで、戻って入力し直す、なんて手間も省けますし、この方式を採用しているフォームは最近よく見かけます。

jQuery Validation Pluginをダウンロードする

jQuery Validation Pluginの公式サイトです。

https://jqueryvalidation.org/

jQuery Validation Pluginの本体は下記のリンクからダウンロードすることができます。

https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0

リンク先のAssetsの下に「jquery-validation-1.17.0.zip」と書かれた圧縮ファイルをダウンロードします。圧縮ファイルを展開すると「dist」というフォルダがありますので、下記のファイルのどちらかをフォームを設置したHTMLファイルに読み込みましょう。

  • jquery.validate.js
  • jquery.validate.min.js

上記を読み込んだ後、設定用のファイルを作成して読み込んでおきます。設定ファイルは分けておいた方が管理が楽なので、「validate-config.js」のようなファイルを作って読み込んでおきます。jQuery Validation PluginはjQueryのプラグインになりますので、jQueryのライブラリファイルも必要になります。すべてを記述すると下記のようになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script src="validate-config.js"></script>

jQuery Validation Pluginの使い方

下記のスクリプトを上記で作成した「validate-config.js」に記述します。この設定ファイルにルール、エラーメッセージ、出力箇所といった内容を設定します。

$(function(){
  //フォーム指定
  $('form').validate({

    //検証ルール設定
    rules: {
      //ここに検証ルールを設定
    },

    //エラーメッセージ設定
    messages: {
      //ここにエラーメッセージを設定
    },

    //エラーメッセージ出力箇所設定
    errorPlacement: function(error, element){
      //ここにエラーメッセージの出力箇所を設定
    }

  });
});

バリデーションルールを設定する

バリデーションルールはrules:{}の中に、ルールに基づいた検証の結果、エラーであればエラーメッセージに設定した文字列が返されます。

下記の例ではinput属性のnameの値が「name」となっている項目に対して入力必須のルールを設定しています。

rules: {
  name: {
    required: true
  }
},

messages: {
  name: {
    required: '名前を入力してください'
  }
}

必要に応じて、下記で紹介するルールを追記して使いやすいフォームを作成しましょう！

required

入力必須にします。

rules: {
  name: {
    required: true
  }
},

messages: {
  name: {
    required: '名前を入力してください'
  }
}

See the Pen required｜jQuery Validate Plugin by Ryohei (@intotheprogram) on CodePen.

minlength

最小文字数を設定します。

rules: {
  name: {
    required: true,
    minlength: 5
  }
},

messages: {
  name: {
    required: '名前を入力してください',
    minlength: '5文字以上で入力してください'
  }
}

See the Pen minlength｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

maxlength

最大文字数を設定します。

rules: {
  name: {
    required: true,
    maxlength: 10
  }
},

messages: {
  name: {
    required: '名前を入力してください',
    maxlength: '10文字以下で入力してください'
  }
}

See the Pen maxlength｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

rangelength

最小文字数、最大文字数を同時に設定します。〇〇文字以上、〇〇文字以下となります。

rules: {
  name: {
    required: true,
    rangelength: [5, 10]
  }
},

messages: {
  name: {
    required: '名前を入力してください',
    rangelength: '5文字以上、10文字以下で入力してください'
  }
}

See the Pen rangelength｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

min

最小数を設定します。

rules: {
  num: {
    required: true,
    min: 10000
  }
},

messages: {
  num: {
    required: '番号を入力してください',
    min: '10000以上の番号を入力してください'
  }
}

See the Pen min｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

max

最大数を設定します。

rules: {
  num: {
    required: true,
    max: 10000
  }
},

messages: {
  num: {
    required: '番号を入力してください',
    max: '10000以下の番号を入力してください'
  }
}

See the Pen max｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

range

最小数、最大数を同時に設定します。〇〇以上、〇〇以下となります。

rules: {
  num: {
    required: true,
    range: [5000, 10000]
  }
},

messages: {
  num: {
    required: '番号を入力してください',
    range: '5000以上、10000以下の番語を入力してください'
  }
}

See the Pen range｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

step

倍数を設定します。step:10とした場合、10の倍数以外の入力に対してエラーを返します。

rules: {
   num: {
    required: true,
    step: 10
  }
},

messages: {
  num: {
    required: '数字を入力してください',
    step: '10の倍数を入力してください'
  }
}

See the Pen step｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

email

メールアドレス以外の入力に対してエラーを返します。

rules: {
  mail: {
    required: true,
    email: true
  }
},

messages: {
  mail: {
    required: 'メールアドレスを入力してください',
    email: 'メールアドレスを正確に入力してください'
  }
}

See the Pen email｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

url

URL以外の入力に対してエラーを返します。

rules: {
  url: {
    required: true,
    url: true
  }
},

messages: {
  url: {
    required: 'urlを入力してください',
    url: 'urlを正確に入力してください'
  }
}

See the Pen url｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

date

日付以外の入力に対してエラーを返します。デフォルトでは区切り文字は「-」もしくは「/」となります。

例）2018-07-10

rules: {
  date: {
    required: true,
    date: true
  }
},

messages: {
  date: {
    required: '日付を入力してください',
    date: '日付を正確に入力してください' //区切り文字は「-」か「/」
  }
}

See the Pen date｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

number

数字以外の入力に対してエラーを返します。小数も許容します。

rules: {
  num: {
    required: true,
    number: true
  }
}

See the Pen number｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

digits

整数以外の入力に対してエラーを返します。

rules: {
  digits: {
    required: true,
    digits: true
  }
},

messages: {
  digits: {
    required: '数字を入力してください',
    digits: '整数で入力してください'
  }
}

See the Pen digits｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

equalTo

設定したセレクタの値と比較して、値が一致していなければエラーを返します。

rules: {
  mail: {
    required: true,
    email: true
  },
  remail: {
    required: true,
    email: true,
    equalTo: 'input[name=mail]'
  }
},

messages: {
  mail: {
    required: 'メールアドレスを入力してください',
    email: 'メールアドレスを正確に入力してください'
  },
  remail: {
    required: '確認用のメールアドレスを入力してください',
    email: '確認用のメールアドレスを正確に入力してください',
    equalTo: 'メールアドレスが一致しません'
  }
}

See the Pen equalTo｜jQuery Validation Plugin by Ryohei (@intotheprogram) on CodePen.

エラーメッセージの出力位置を設定する

エラーメッセージの出力位置を設定します。チェックボックスやラジオボタン等といった複数ある項目に関しては、出力箇所を指定すると良い感じに表示されます！

errorPlacement: function(error, element){

  //ラジオボタンの例
  if(element.attr('name') === 'radio'){
    error.insertAfter('#radioErr');

　//チェックボックスの例
  }else if( element.attr('name') === 'checkbox[]'){
          error.insertAfter('#checkboxErr');

  //標準出力箇所（フォーム項目の後にエラーメッセージを出力）
  }else{    
    error.insertAfter(element);
  }
}

以上、フォームの入力値を検証するjQuery Validation Pluginの使い方のご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら