Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

フォームの入力チェックに使う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);
        }
    }
});
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away