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コードが以下のようです。

[bash]

<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>

[/bash]

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

[bash] $(() => {
#カスタムバリデーションとしても文字と英数字を組み合わせたパスワードかどうかという’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: ‘上記に入力した内容と異なります。ご確認ください’
}
}
})
})
[/bash]

結果

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

素敵ですね。

終わりに

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