jQuery Validation Pluginで独自の検証ルールを作成する

こんにちは、Ryohei（@ityryohei）です！

jQuery Validation Pluginはフォームの入力項目にバリデーションを追加することができるプラグインです。高機能かつ簡単に導入することができるため、多くのWebサイトで利用されています。

jQuery Validation Pluginは海外で開発されたプラグインになります。フォーム入力で必要になる検証ルールはほとんど備わっているのですが、日本環境で使用する際に標準の処理だけでは補えない部分があります。

カタカナや電話番号のバリデーション等。

それは他の海外のプラグインも同様ですが、このプラグインの素晴らしい点は独自のカスタムルールを作成してバリデーションルールに追加できる点です。jQueryで少し処理を書くだけで独自のルールを作成してバリデーションルールに設定することができます。

本記事では、jQuery Validation Pluginで独自のカスタムルールを作成する方法を詳しくご紹介していきたい思います。

本記事の内容

独自の検証ルールを作成する
独自の検証ルールを追加する
独自の検証ルールを使用する

※jQuery Validation Pluginの使い方に関しましては下記のページで解説しております。基本的な使い方については下記をご覧いただければ幸いです。

フォームの入力値を検証するjQuery Validation Pluginの使い方

では、解説していきます。

独自の検証ルールを作成する

まずは独自のルールを作成します。色々と方法はありますが、本記事では「methods」に独自の検証ルールを作成していきます。

//独自の検証ルールを定義
var methods = {
  //ここに独自の検証ルールを追加
};

試しに、電話番号とカタカナの検証ルールを作ってみます。

var methods = {
  tel: function(value, element){
    return this.optional(element) || /^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/.test(value.replace(/[━.*‐.*―.*－.*\-.*ー.*\-]/gi,''));
  },
  katakana: function(value, element){
    return this.optional(element) || /^[ア-ン゛゜ァ-ォャ-ョー「」、]+$/.test(value);
  }
};

上記のコード内にある「tel」と「katakana」が今回作成した独自の検証ルールになります。正規表現を使って入力された値を検証し、結果を返します。

独自の検証ルールを追加する

「独自の検証ルールを作成する」では「methods」に独自の検証ルールを作成しました。続いて作成した検証ルールをjQuery Validation Pluginで使用できるようにします。具体的には、下記の記述を追加します。

//独自の検証ルールを追加
$.each(methods, function(key) {
  $.validator.addMethod(key, this);
});

2行目は「methods」の中にある独自の検証ルールの分だけループする処理、
3行目の「$.validator.addMethod(key, this);」が実際に検証ルールを追加する処理になります。

独自の検証ルールをフォームで使用する

ここまでの内容で独自の検証ルールを使用する準備が整いました。実際のフォームを使って、独自の検証ルールを使用できるように設定してみます。

HTML

フォームは下記のものを使用します。「telErr」と「furiganaErr」にエラーメッセージを出力します。

<form id="myForm" method="post" action="#">
  <table>
    <tbody>
      <tr>
        <th>電話番号<span class="required">必須</span></th>
        <td>
          <input name="tel" type="tel" value="">
          <div id="telErr"></div>
        </td>
      </tr>
      <tr>
        <th>フリガナ<span class="required">必須</span></th>
        <td>
          <input name="furigana" type="text" value="">
          <div id="furiganaErr"></div>
        </td>
      </tr>
    </tbody>
  </table>
  <button>送信</button>
</form>

JS

独自の検証ルールを追加した全体のスクリプトになります。長くなってしまいましたので、適宜コメントを記載していますので、参考にしていただければと思います。

//独自の検証ルールを設定
var methods = {
  //電話番号
  tel: function(value, element){
    return this.optional(element) || /^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/.test(value.replace(/[━.*‐.*―.*－.*\-.*ー.*\-]/gi,''));
  },
  //カタカナ
  katakana: function(value, element){
    return this.optional(element) || /^[ア-ン゛゜ァ-ォャ-ョー「」、]+$/.test(value);
  }
};

//各入力項目の検証ルールを設定する
var rules = {
  tel: {
    tel: true,
    required: true
  },
  furigana: {
    katakana: true,
    required: true
  }
};

//各検証ルールのエラーメッセージを設定する
var messages = {
  tel: {
    tel: '電話番号を正確にご入力ください',
    required: '電話番号をご入力ください'
  },
  furigana: {
    katakana: '全角カタカナでご入力ください',
    required: 'フリガナをご入力ください'
  }
};

//独自の検証ルールを追加（基本的に変更しなくてOKです）
$.each(methods, function(key) {
  $.validator.addMethod(key, this);
});

//指定したフォームにバリデーションを設定
$(function(){
  $('#myForm').validate({
    rules: rules,
    messages: messages,

    //エラーメッセージ出力箇所設定
    errorPlacement: function(error, element){

      if(element.attr("name") === "furigana") {
        error.insertAfter("#furiganaErr" );

      } else if(element.attr("name") === "tel") {
        error.insertAfter("#telErr" );

      } else {
        error.insertAfter(element);
      }
    }
  });
});

下記は本記事でご紹介した内容のデモになります。独自の検証ルールがちゃんと設定されているかと思います。

See the Pen
JqBBVO by ryoy (@intotheprogram)
on CodePen.

フォームに応じて独自の検証ルールを追加することができるjQuery Validation Pluginは色々な場面で役に立つプラグインとなっておりますので、できることとできないことを把握することで案件にも対応できる素晴らしいプラグインですので、ぜひ今後の制作に活用していただければと思います。

以上、jQuery Validation Pluginで独自の検証ルールを作成する方法のご紹介でした！