【jQuery】リアルタイムでバリデーションチェックを簡単に実装（jQery-validate）

jQery-validateとは

・jQueryプラグイン
・リアルタイムでバリデーションチェックが可能
・カスタマイズできる

備考欄

・随時修正
・自分用メモ
【公式】jQuery Validation Plugin
【公式】ダウンロード(ver 1.19.1)

デフォルトのバリデーションルール

ルール名	内容
required	必須入力チェックを行う
remote	バリデーション結果をサーバに問い合わせる
email	入力値がメールアドレスのフォーマットであるか
url	入力値がURLのフォーマットであるか
date	入力値が日付であるか
dateISO	入力値がISO形式の日付であるか
number	入力値が数字であるか
digits	入力値がクレジットカード番号のフォーマットであるか
creditcard	入力値がクレジットカード番号のフォーマットであるか
equalTo	入力値が指定した値と一致しているか
maxlength	入力値が指定した桁数以下か
minlength	入力値が指定した桁数以上か
rengelength	入力値が指定した桁数の範囲であるか
renge	入力値が指定した数字の範囲であるか
max	入力値が指定した数字以下であるか
min	入力値が指定した数字以上であるか

後からバリデーションルール追加（初期設定後）

※　公式にあるaddClassRulesが使えなかったため、別の検索・・・
参考サイト：[【Qiita】jQuery Validation Plugin 簡単な使い方まとめ]
(https://qiita.com/konnma/items/eb26651576e625b72805)

使用不可

$.validator.addClassRules( 'add' , { required: true });
$.validator.addClassRules({ add  : { required: true } });

代わりに使用

$('[name="add"]').rules( 'add' , { required: true } );
$('[name="remove"]').rules( 'remove', 'required max' );

【複数設定する場合】
add ：{ }で指定
remove：半角スペースで指定

エラーメッセージの日本語化(変更)

  $.extend($.validator.messages, {
    required   : "このフィールドは必須です。",
    remote     : "このフィールドを修正してください。",
    email      : "有効なEメールアドレスを入力してください。",
    url        : "有効なURLを入力してください。",
    date       : "有効な日付を入力してください。",
    dateISO    : "有効な日付（ISO）を入力してください。",
    number     : "有効な数字を入力してください。",
    digits     : "数字のみを入力してください。",
    creditcard : "有効なクレジットカード番号を入力してください。",
    equalTo    : "同じ値をもう一度入力してください。",
    extension  : "有効な拡張子を含む値を入力してください。",
    maxlength  : $.validator.format( "{0} 文字以内で入力してください。" ),
    minlength  : $.validator.format( "{0} 文字以上で入力してください。" ),
    range      : $.validator.format( "{0} から {1} までの値を入力してください。" ),
    rangelength: $.validator.format( "{0} 文字から {1} 文字までの値を入力してください。" ),
    step       : $.validator.format( "{0} の倍数を入力してください。" ),
    max        : $.validator.format( "{0} 以下の値を入力してください。" ),
    min        : $.validator.format( "{0} 以上の値を入力してください。" )
  });

参考URL

・[【jQuery入門道場】jquery.validate.jsのvalidateメソッドの超訳]
(https://jquery-master.net/plugin/jquery_validate_js/)
　→超訳でわかりやすい！オプション内容を確認して、公式でソース例を見に行く
・[【公式】.validate() | jQuery Validation Plugin]
(https://jqueryvalidation.org/validate/)
　→jQuery入門道場と併用してみるのが自己ベスト！
・[【hifive】jQuery Validation Plugin]
(https://www.htmlhifive.com/conts/web/view/library/jquery-validate)
　→使い方など記載
・[【システムガーディアン株式会社】jQuery Validation 簡単にフォームをチェック バリデーション]
(https://sys-guard.com/post-14579/)
　→使い方など記載
・[【なんとなくだらだら。。。】jquery.validateの使い方]
(http://blog.livedoor.jp/k_shin_pro/archives/45235160.html)
　→使い方など記載
・[【Minory】jQuery Validationプラグインの共通エラーメッセージを日本語化する方法]
(https://minory.org/jquery-validation-ja.html)