Posted at

jQuery Validation Pluginが使いやすくておすすめ

フォームの入力チェックに使うjavascriptだけれども。

https://jqueryvalidation.org/

なかなかよくできてて使いやすい。

基本的には適用したいformにidを振って、

<form method="post" action="" id="applyForm">

<input type="text" name="name" id="name">
<input type="text" name="zip" id="zip">
.
</form>

<script type="text/javascript" src="js/jquery.validate.js" ></script>

$("#applyForm").validate({

});

とするだけ。input部品のnameに対してルールやメッセージを指定すればよい。

$("#applyForm").validate({

rules: {
name: {
required: true,
maxlength: 50
}
},
messages: {
name: {
required: "お名前を入力してください。",
maxlength: "お名前は50文字以内で入力してください。"
},
}
});

デフォルトで使えるルールにはメールアドレスチェックもあるが、自前でつくる場合は、以下のように用意しておいて、呼べば良い。

validate()の外。

jQuery.validator.addMethod("isZip", function(value, element) {

return this.optional( element ) || /^\d{3}-?\d{4}$/.test( value );
}, '郵便番号をご確認ください。');

validate()の中。

        zip: {

required: true,
isZip: true
},

で、表示されるエラーメッセージなんだが、デフォルトだと

<input type="text" name="name" id="name" class="error">

<label id="name-error" class="error" for="name">お名前を入力してください。</label>

というようにlabelでclassがerrorでinput要素の後ろにくっつく。

これを変えたい場合は、validate()の中に以下のように追加する。


errorElement: "span",// labelがspanにかわる
errorClass: "alert",// class="alert"にかわる

さらに、


errorPlacement: function (err, element) {
element.before(err);
}

とすればinput要素の前に表示されるようになる。

input要素に応じて表示場所を変えたい場合は、


errorPlacement: function (err, element) {
if (element.attr("name") == "zip") {
element.parent().before(err);
} else {
element.before(err);
}
}

というようなこともできる。

すばらしい。

合体。

jQuery.validator.addMethod("isZip", function(value, element) {

return this.optional( element ) || /^\d{3}-?\d{4}$/.test( value );
}, '郵便番号をご確認ください。');

$("#applyForm").validate({
errorElement: "span",
errorClass: "alert",
rules: {
name: {
required: true,
maxlength: 50
},
zip: {
isZip: true
}
},
messages: {
name: {
required: "お名前を入力してください。",
maxlength: "お名前は50文字以内で入力してください。"
}
},
errorPlacement: function (err, element) {
if (element.attr("name") == "zip") {
element.parent().before(err);
} else {
element.before(err);
}
}
});