Jquery Validation Pluginでフォームバリデーションを作る


初めまして。

エンジニアのクオンです。

今日はJquery Validation Pluginについて紹介させて頂きたいと思います。

Jquery Validation Pluginとは

フォーム要素内の入力部品に入力された値が正しいかを、指定したルールに基づいてチェックを行うjQueryライブラリです。
リンクはこちらです。https://jqueryvalidation.org/

主な機能

  • Submitイベント時のバリデーションの実行
  • 入力内容変更時のバリデーションの実行
  • カスタムバリデータの追加・削除
  • エラーメッセージの追加・削除
  • エラーメッセージを任意の位置(要素)に表示
  • バリデーション後、Submitを実行させない

デフォルトでサポートしているバリデーションが以下です

  • required
  • email
  • url
  • number, digits
  • date
  • creditcard
  • equalTo
  • maxlength, minlength
  • range
  • max, min

必要であれば、自分のカスタムバリデーションルールも簡単に作れます。

Jquery Validation Pluginを使うと、リアルタイムのようなバリデーション機能を簡単に実装できます。
また、以下のこともあり、安心して購入できます。
  • ドキュメントが十分
  • githubリポリトリでスター沢山もらっているし、改善、バグフィックスも続けている githubはこちら
  • パーケッジマネージャー(npmなど)でインストール可能、ECMAScript 6,Webpackでも使える

実際に実装する

準備

パーケッジマネージャーでインストール後(またはドウンロード後)、
jquery.validate.js と localization/messages_ja.js ファイルをインポートしてください。
messages_ja.jsファイルに日本語のデフォルトエラーメッセージが含まります。(他の言語のlocalizationファイルもあります)

コード

HTMLコードが以下のようです。



<div class="signup">
    <label><b>メールアドレス</b></label>
    <input type="text" name="email">

    <label><b>パスワード</b></label>
    <input type="password" name="password" id="password">

    <label><b>パスワード(確認)</b></label>
    <input type="password" name="password-repeat">
</div>


上のHTMLコードに対して、バリデーションコードを以下のように書きます。
(ECMAScript 6で書きます)
説明はコードの中にちゃんと書きます。

$(() => {
  #カスタムバリデーションとしても文字と英数字を組み合わせたパスワードかどうかという'passwordStrength'を定義します
  $.validator.addMethod('passwordStrength', (value) =>
    !/^(.)1*$/.test(value) && !/^d+$/.test(value))

  #該当のHTMLクラスでvalidateを実行
  $('.signup').validate({
    rules: {
      'email': {                 #上のメールアドレスinput要素のnameプロパティの値
        required: true,           #required バリデーションを適用
        email: true               #email バリデーションを適用
      },
      'password': {              #上のパスワードinput要素のnameプロパティの値
        required: true,           #required バリデーションを適用
        minlength: 6,               #6ケタ以上かというバリデーションを適用
        passwordStrength: true    #上の定義したpasswordStrengthバリデーションを適用
      },
      'password-repeat': {       #上のパスワード確認input要素のnameプロパティの値
        required: true,           #required バリデーションを適用
        equalTo: "#password"      #パスワードinput要素の値と同じかどうかバリデーションを適用
      }
    },
       
    #Jquery Validation Pluginがデフォルトエラーメッセージを提供しているのですが、自分のより明確なメッセージも定義できる   
    messages: {
      'email': {
        required: 'メールアドレスを入力してください',
        email: '有効なメールアドレスを入力してください'
      },
      'password': {
        required: 'パスワードを入力してください',
        minlength: 'パスワードは6文字以上で入力してください',
        passwordStrength: 'セキュリティ強度の低いパスワードが設定されています。
' +
          '英数字を組み合わせたパスワードの使用を推奨しています。'
      },
      'password-repeat': {
        required: '確認のため再度入力してください',
        equalTo: '上記に入力した内容と異なります。ご確認ください'
      }
    }
  })
})

結果

上記のコードで以下のようにバリデーションを実装できます。

素敵ですね。

終わりに

リンクバルでは エンジニアを積極募集中 です。興味のある方のご応募お待ちしております。