jQuery Validation Plugin でフォームの検証を行う

基本的な使い方。

jQuery Validation Plugin | Form validation with jQuery

jQuery 3.1.0
jquery-validate 1.15.1

Contents

CSS のクラス指定

エラーメッセージに適用するクラスを errorClass に指定する。

$(function() {
  $('#fm').validate({
    errorClass: 'valid-err',

検証ルールの指定

検証ルールを rules に指定する。

    rules: {
      'name': {
        required: true,
        maxlength: 20
      },
    },

エラーメッセージの指定

エラーメッセージを messages に指定する。
標準メッセージを利用する場合は、省略可能。

    messages: {
      password: {
        required: 'パスワードは必須です。',
        length: $.validator.format('パスワードは{0}文字以上で入力して下さい。')
      }
    }

標準メッセージのディフォルトは英語。日本語化する場合は /src/localization/messages_ja.js を読み込む。

jquery-validation/messages_ja.js at master · jzaefferer/jquery-validation · GitHub

独自検証ルールの追加

$.validator.addMethod で設定する。
追加した検証ルールを rules に指定する。

$(function() {
  $.validator.addMethod('jaPhone',
    function(value, element) {
      return this.optional(element) || /^\d{11}$|^\d{3}-\d{4}-\d{4}$/.test(value);
    },
    '入力された電話番号が不正です。'
  );
  $('#fm').validate({
    rules: {
      'tel': {
        required: true,
        jaPhone: true
      },

See the Pen jQuery Validation Plugin by DriftwoodJP (@DriftwoodJP) on CodePen.