[jQuery] jQuery Validation Plugin でフォームの検証を行う

基本的な使い方。

[markdown]
> * [jQuery Validation Plugin | Form validation with jQuery](https://jqueryvalidation.org/)

– jQuery 3.1.0
– jquery-validate 1.15.1

## CSS のクラス指定

エラーメッセージに適用するクラスを `errorClass` に指定する。

“`javascript
$(function() {
$(‘#fm’).validate({
errorClass: ‘valid-err’,
“`

## 検証ルールの指定

検証ルールを `rules` に指定する。

“`javascript
rules: {
‘name’: {
required: true,
maxlength: 20
},
},
“`

## エラーメッセージの指定

エラーメッセージを `messages ` に指定する。
標準メッセージを利用する場合は、省略可能。

“`javascript
messages: {
password: {
required: ‘パスワードは必須です。’,
length: $.validator.format(‘パスワードは{0}文字以上で入力して下さい。’)
}
}
“`

標準メッセージのディフォルトは英語。日本語化する場合は `/src/localization/messages_ja.js` を読み込む。

> * [jquery-validation/messages_ja.js at master · jzaefferer/jquery-validation · GitHub](https://github.com/jzaefferer/jquery-validation/blob/master/src/localization/messages_ja.js)

## 独自検証ルールの追加

`$.validator.addMethod` で設定する。
追加した検証ルールを `rules` に指定する。

“`javascript
$(function() {
$.validator.addMethod(‘jaPhone’,
function(value, element) {
return this.optional(element) || /^\d{11}$|^\d{3}-\d{4}-\d{4}$/.test(value);
},
‘入力された電話番号が不正です。’
);
$(‘#fm’).validate({
rules: {
‘tel’: {
required: true,
jaPhone: true
},
“`

See the Pen jQuery Validation Plugin by DriftwoodJP (@DriftwoodJP) on CodePen.

JavaScript逆引きレシピ jQuery対応

posted with amazlet at 16.09.30

山田 祥寛
翔泳社
売り上げランキング: 249,196

Amazon.co.jpで詳細を見る

## 補遺

> * [jQuery Validate Pluginの解説とValidate 日本語環境用PluginとjQuery Form Pluginとの連携 – くらげだらけ](http://kudakurage.hatenadiary.com/entry/20091211/1260521031)
[/markdown]