LoginSignup
65
60

More than 5 years have passed since last update.

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

Posted at

フォームの入力チェックに使う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);
        }
    }
});
65
60
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
65
60