Help us understand the problem. What is going on with this article?

【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 簡単な使い方まとめ

使用不可
$.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メソッドの超訳
 →超訳でわかりやすい!オプション内容を確認して、公式でソース例を見に行く
【公式】.validate() | jQuery Validation Plugin
 →jQuery入門道場と併用してみるのが自己ベスト!
【hifive】jQuery Validation Plugin
 →使い方など記載
【システムガーディアン株式会社】jQuery Validation 簡単にフォームをチェック バリデーション
 →使い方など記載
【なんとなくだらだら。。。】jquery.validateの使い方
 →使い方など記載
【Minory】jQuery Validationプラグインの共通エラーメッセージを日本語化する方法

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away