コーディングブログ

Coding Blog

jQuery Validation Pluginの使い方 ~オプション-サンプルコード~

jQuery

jQuery Validation Pluginとは、フォームの入力チェックを行うjQueryのプラグインです。
リアルタイムでチェックを行うのでEFOに優れています。

jQuery Validation Plugin

以前はよく『jQuery-Validation-Engine』を使用していましたが、
エラーメッセージや、エラーの出力位置がinputタグの直下で、inputタグの上に出力したい場合などはカスタマイズがしづらく、痒い所に手が届かない印象でした。

それに比べ、こちらの『jQuery Validation Plugin』は、name属性で固有でエラー文を設定したり、
エラー文が出力されるタグを指定でき、どちらも自由にカスタマイズできるので使いやすかったので今回ご紹介いたします。

    プラグインファイルを用意する

    公式のgitはこちら
    https://github.com/jquery-validation/jquery-validation

    しかし、使用するには下記の手順が必要です。
    https://github.com/jquery-validation/jquery-validation/blob/master/CONTRIBUTING.md#build-setup

    ダウンロード

    ビルドがなんちゃらと書かれていて面倒なので下記からダウンロードするのが良いでしょう。
    jQuery Validation Plugin – v1.19.1

    サンプルコード

    実装サンプル

    実装サンプルはこちら

    HTML

    js

    サンプルコードの解説

    HTML

    必須項目にはrequired属性を付けます。

    エラー文を出力させるpタグを用意します。
    そのclassはis-error-【name属性】といったルールで作成します。
    ※それぞれお好みでclassなどを付けて、スタイル(css)を適用させてください。

    チェックボックスのname属性は[]を付け、配列にします。
    エラー文のpタグのclassは[]抜きで作成します。

    js

    使いまわすエラー文を変数に入れる

    1~3行目
    あらかじめ使いまわすエラー文を変数に入れておきます。

    バリデートを実行

    5行目
    $('#form').validate();で入力チェックは行われますが、その中でオプションを書いていきます。

    エラーメッセージ

    18~35行目
    inputのname属性をキーにエラーメッセージを固有で指定できます。

    エラー文が出力されるタグを指定

    38~45行目
    どこのタグにエラー文のHTMLを出力させるか指定します。
    変数nameにname属性の値を格納:var name = element.attr('name');
    エラー文をclass『is-error-【name属性】』といったルールを持たせ、そのタグに挿入:error.appendTo($('.is-error-'+name));

    category[]といった[]の形式だとうまくいかないので、チェックボックスの場合は変数を使わずセレクターを指定します。
    error.appendTo($('.is-error-category'));

    47~48行目
    出力させるエラー文のタグを指定:errorElement: "span",
    出力させるエラー文のタグのclassを指定:errorClass: "is-error",

    この場合の、メールアドレス箇所を例にすると、タグはspanにし、class『is-error』を指定しました。(デフォルトはlabelタグ)
    <p class="is-error-mail"><span id="mail-error" class="is-error">メールアドレスの形式が正しくありません。</span></p>
    といったタグでエラー文が出力されます。

    オプション

    バリデートルール

    この箇所の中に記述できるルール一覧です。
    入力チェックを行いたいものを追記してあげてください。