エンジニアのクオンです。
目次
Jquery Validation Pluginとは
フォーム要素内の入力部品に入力された値が正しいかを、指定したルールに基づいてチェックを行うjQueryライブラリです。
リンクはこちらです。https://jqueryvalidation.org/
主な機能
- Submitイベント時のバリデーションの実行
- 入力内容変更時のバリデーションの実行
- カスタムバリデータの追加・削除
- エラーメッセージの追加・削除
- エラーメッセージを任意の位置(要素)に表示
- バリデーション後、Submitを実行させない
デフォルトでサポートしているバリデーションが以下です
- required
- url
- number, digits
- date
- creditcard
- equalTo
- maxlength, minlength
- range
- max, min
必要であれば、自分のカスタムバリデーションルールも簡単に作れます。
- ドキュメントが十分
- 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>
上の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: ‘上記に入力した内容と異なります。ご確認ください’
}
}
})
})
[/bash]
結果
上記のコードで以下のようにバリデーションを実装できます。
素敵ですね。
終わりに
リンクバルでは エンジニアを積極募集中 です。興味のある方のご応募お待ちしております。
