[Jquery] Validation

フォームの入力体験を向上するため、
フォームのバリデーションを Jquery Validation を使って正しい入力へ誘導します。

最新版が1.19.5となったのでドキュメントも更新します。

URL

こちらが本家サイトになります。
jQuery Validation Plugin | Form validation with jQuery
ドキュメントはこちらから

利用方法

Hotlink

今回はこちらを使います。

https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js

https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js

パッケージ経由

パッケージマネージャー経由で利用する人は下記を参照してください。

Nuget

https://www.nuget.org/packages/jquery.validation

Npm

https://www.npmjs.com/package/jquery-validation

メソッド

jquery.validate.jsには3つのメソッドがあります。

validate()

指定したフォームを`validate"します。

valid()

指定したフォームまたはエレメントをvalidateします。

rules()

指定したエレメントに対してruleを読み込み、追加、削除

カスタムセレクター

3つのセレクターが用意されています

:blank

入力されてないエレメントを選択します

:filled

入力済みのエレメントを選択します

:unchecked

チェックされていないエレメントを選択します

Build-inされているValidation メソッド

• required
• remote
• minlength
• maxlength
• rangelength
• min
• max
• range
• step
• email
• url
• date
• dateISO
• number
• digits
• equalTo

サンプル1

本家にあるサンプルは下記

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

Ruleを作る

基本的な使い方はRuleを作っていきます。各Ruleに沿ってValidateしていきます。

例

$("#myform").validate({
  rules: {
    // simple rule, converted to {required:true}
    name: "required",
    // compound rule
    email: {
      required: true,
      email: true
    }
  }
});

上のサンプルではrulesの名前を required とし、emailというフィールド名をもつフィールドに対してrequired(必須)であること、メールタイプであることをruleとしています。

次　

サーバーサイドでのチェック、エラーメッセージの表示場所の指定などをカバー