jQuery Validation
フォームの入力チェックを行うjQueryのプラグインです。
jQuery Validationなんて今更ですが、古いサイトのメンテナンスなどでまだまだ出てきますので、
ここにメモしたいと思います。
導入
CDN https://cdnjs.com/libraries/jquery-validate
上記サイトより読み込みます。もちろんjQueryも必須です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
サンプルのフォーム
下記は単純なフォームの例です。
email_confirmは確認用のE-mailとします。
<form>
<input type="radio" name="lang" value="html" checked="checked">HTML
<input type="radio" name="lang" value="css">CSS
お名前：<input name="name" type="text">
E-mail：<input name="email" type="text">
E-mail確認用：<input name="email_confirm" type="text">
<input type="submit" value="送信">
</form>
上記フォームに対してバリデーションを設定する場合は、下記のように記述します。
$(function() {
var validator = $("form").validate();
})
ルールを記述
ルールを記述します。requiredは必須項目です。 nameが必須の場合は下記のようになります。
var validator = $('form').validate({
rules: {
name: {
required: true
}
}
})
日本語化
このままでは、メッセージが英語で出力されるので、日本語化します。
var validator = $('form').validate({
rules: {
name: {
required: true
}
},
messages: {
name: {
required: "お名前を入力してください。"
}
}
})
再入力のメールを検証する
再入力のメールと一致しているか検証するには、下記のようにします。
emailと入れるだけで正しいemail形式かチェックしてくれます。
var validator = $('form').validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
email_confirm: {
equalTo: "[name=email]",
required: true,
email: true
}
},
messages: {
name: {
required: "お名前を入力してください。"
},
email: {
required: 'E-mailは必須項目です。',
email: 'E-mailの形式が正しくありません。',
},
email_confirm: {
equalTo: '再入力したE-mailが一致しません。',
required: '確認用E-mailは必須項目です。',
email: '確認用E-mailの形式が正しくありません。'
}
}
})
条件付きで検証したい
サンプルのフォームのradioボタンのlangのvalueが「html」の場合にnameを必須項目にします。
requiredの個所でif文ぽく記述することで可能です。
name: {
required: function(element){ return $('input[name=lang]:checked').val() == 'html';}
},
入力チェックOKか取得したい
valid()でtrueかfalseを取得できます。
if (validator.valid()) {
なにかしたいこと
} else {
validator.focusInvalid();
}
