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

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

• ドキュメントが十分
• 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で書きます)
説明はコードの中にちゃんと書きます。

#該当の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]

結果

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

素敵ですね。

終わりに

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