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

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

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

基本的には適用したい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);
        }
    }
});