jQueryプラグイン validate.js

nissy 61views 更新:2016年8月30日

まずバリデートとは

恥ずかしながらvalidationの意味を知らなかったので調べて見ると、検証とか妥当性確認とかの意味らしいです。

今回の開発でバリデートとかかわることがあったのですが、どこで関わったかというと入力フォームのところです。ウェブで新規会員登録とかする時、「この項目は必須です」や「入力項目が不足しています」とかの注意文を見ることがあると思います。これを手軽に実装してくれるのが、jquery.validate.jsというプラグインです。このプラグインの使い方について、少し学んだのでハックに残しておきます。

<form id="hoge" method="hogehoge" action="path">
   <input type="text" class="required" name="comment"/>
   <input type="submit" />
 </form>

以上のようなフォームにおいて、以下のコードを挟むことによってバリデートを行ってくれます。

$(document).ready(function() {
    $("#hoge").validate();  //バリデート
});

このバリデートは、classを用いてバリデートの種類を指定しています。今は、requiredということで必須項目としてバリデートを行います。また以下のように、classを用いず複数の制限を設ける書き方もあります。(この場合は、inputタグ内のclassは削除します)

 $("#testForm").validate({
      rules : {
               comment : {
                          required: true,
                          digits: true,
                          minlength: 3,
                          maxlength: 10
                         }
               }
 });

以上のコードだと、必須入力で、数値のみで、文字の長さが3文字以上10文字未満というバリデートルールになります。 validate.jsについては以下のページに、かなり詳しく書いてあるので参考にしてみてください。
jQuery Validate Pluginの解説

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません