jquery.validate.js（jquery-validation）の使い方をまとめてみた

SHARE

フォームのバリデーションを簡単に行うことができるjQueryのプラグインjquery.validate.js（jquery-validation）の使い方をまとめてみました。

jquery.validate.jsの公式サイトはこちら
jquery.validate.jsのダウンロードはこちら

最低限の使い方

下記のようにすれば、Submitするときにバリデーションを実行してくれます。

CDNでも使えますが、ダウンロードして使用する場合はこちらからダウンロードできます。

※jquery.validate.jsを使用するにはjQueryが必要です

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<form>
  <input type="text" name="test_text">
  <input type="submit" value="submit">
</form>
<script>
$(function(){
  $('form').validate({
    rules: {
      test_text: {
        required: true
      }
    },
  });
});
</script>

主なルール一覧

ルール説明設定例備考
required必須チェックrequired:truetrueで必須チェックを行う。
テキストだけでなく、プルダウン、ラジオボタン、チェックボックスも必須チェック可能
remoteサーバー側でチェックを行うremote:”validate.php”メールアドレスやIDがすでに登録されているかのチェックなどサーバー側でチェックしたい場合に使用する
minlength最小文字数チェックminlength:55文字未満はバリデーションエラー
maxlength最大文字数チェックmaxlength:1011文字以上はバリデーションエラー
rangelength文字列が指定した範囲内の長さか、チェックボックスの選択数が指定した範囲内の個数かのチェックrangelength:[5, 10]5文字未満もしくは11文字以上はバリデーションエラー
min最小数値以上かのチェックmin:2020未満はバリデーションエラー
max最大数値以下かのチェックmax:5051以上はバリデーションエラー
range入力値が指定した範囲内の値かのチェックrange5未満または11以上はバリデーションエラー
step指定した数値かどうかのチェックstep:1010以外はバリデーションエラー
emailメールアドレス形式化どうかのチェックemail:truefalseだとチェックを行わない
urlURL形式化どうかのチェックurl:true
date日付かどうかのチェックdate:true「2020-10-10」「2020-10-10」はチェックOK。「2020年10月10日」、「20201010」はNG。
「2020-13-31」のような明らかにふざけた日付はバリデーションエラーだが、「2020-02-30」「2020-11-31」はチェックを通ってしまう。
dateISO日付がISO標準に準拠しているかのチェックdateISO:true
number数値化どうかのチェックnumber:trueマイナス、小数点もバリデーションOK
digits正の整数かどうかのチェックdigits:trueマイナス、小数点はバリデーションNG
equalTo2つのフォームの入力値が等しいかどうかのチェックid=”email”とid=”confirm_email”というフォームがある場合

confirm_email:{
equalTo:’#email’
}

メールアドレスやパスワードを二回入力する時などに使用する
acceptファイルのmine-typeのチェックaccept:“image/*”pngなど画像のみ許可する。
mime-typeを指定する。
creditcardクレジットカード番号形式かどうかのチェックcreditcard:true
extensionファイルの拡張子のチェックextension:”png|jpg”
(extension:”png,jpg”)		pngもしくはjpgのみ許可する。
パイプもしくはコロンで複数の拡張子を指定できる

エラーメッセージを任意のものに変更する

デフォルトだとエラーメッセージは英語で表示されてわかりにくいので任意のものに変更したい場合は下記のようにします。

<form>  
  <input type="text" name="test_text">
  <input type="submit" value="submit">
</form>
<script>
$(function(){
  $('form').validate({
    rules: {
      test_text: {
        required: true
      }
    },
    messages: {
      test_text: {
        required: '必須入力です'
      }
    }
  });
</script>

任意のタイミングでバリデーションを実行する場合

通常はSubmitしたときにバリデーションが実行されますが、プルダウンやラジオボタン選択時など任意のタイミングでバリデーションを実行したい場合は「valid()」を使用します。
バリデーションエラーがなかった場合は「true」、エラーがあった場合は「false」が返ってくるので、エラーのときに何か処理を行うことも可能です。
下記はテキストエリアに文字入力時にチェックを行う例です。

<form>
  <input type="text" name="test_text">
  <input type="submit" value="submit">
</form>
<script>
$(function(){
  $('form').validate({
    rules: {
      test_text: {
        minlength: 10
      }
    },
    messages: {
      test_text: {
        minlength: '10文字以上で入力してください'
      }
    }
  });
  $('input[name="test_text"]').on('keyup', function(){
      if (!$('form').valid()) {
        alert('入力エラーがあります');
      }
    });
  });
</script>

サーバー側でチェックを行う場合

IDやメールアドレスを入力した際にすでに使用されているかDBでチェックするなどサーバー側でチェックを行いたい場合は「remote」を使います。
サーバー側プログラムでtrueを返した場合チェックNGとなります。

<form>
  <div>
    <lable>ユーザーID</label>
    <input type="text" name="user_id">
  </div>
  <input type="submit" value="submit">
</form>
<script>
$(function(){
  $('form').validate({
    rules: {
      user_id: {
        remote: "/validate.php"
      }
    },
    messages: {
      user_id: {
        remote: "このIDは既に使用されています",
      }
    }
  });
});
</script>

validate.php

<?php
  $test_text = $_REQUEST['test_text'];
  // $resultは何らかのチェックの結果
  $result = validate($test_text);
  if ($result) {
    echo 'true';
  } else {
    echo 'false';
  }
  exit;

サーバー側で複数の項目のチェック

「入力フォームAが特定の値の場合は入力フォームBは特定の値でなければならない」など、複数の項目の複合チェックをサーバーで行いたい場合は下記のようにすれば他の入力フォームの値もサーバーに送信できます。

<form>
  <input type="text" name="test_text">
  <input type="text" name="test_id">
  <input type="submit" value="submit">
</form>
<script>
$(function(){
  $('form').validate({
    rules: {
      test_text: {
        remote: {
          url: "/validate.php",
          type: 'post',
          data: {
            test_id: function() {
              return $('input[name="test_id"]').val();
            }
          }
        }
      }
    },
    messages: {
      test_text: {
        remote: "既に使用されています",
      }
    }
  });
});
</script>

validate.php

<?php  
  $test_text = $_POST['test_text'];
  $test_id = $_POST['test_id'];
  // $resultは何らかのチェックの結果
  $result = validate($test_text, $test_id);
  if ($result) {
    echo 'true';
  } else {
    echo 'false';
  }
  exit;

独自ルール(カスタムルール)の追加

addMethodを使えば独自ルールを追加することができます。

<form>
  <input type="text" name="test_text">
  <input type="submit" value="submit">
</form>
<script>
$(function(){
  $.validator.addMethod('test_rule', function(value, element) {
    if (value == 'test') {
      return true;
    }
    return false;
  });
  $('form').validate({
    rules: {
        test_rule: true
      }
    },
    messages: {
      test_text: {
        test_rule: '入力値が間違っています'
      },
    }
  });
});
</script>

バリデーションルールの追加・削除

特定の条件のときにバリデーションルールを追加する場合はadd、削除する場合はremoveを使います。

<form>
  <input type="text" name="test_text">
  <input type="text" name="test_id">
  <input type="submit" value="submit">
</form>
<script>
$(function(){
  $('form').validate({
    rules: {
      test_text: {
        required: true
      }
    },
    messages: {
      test_text: {
        required: '必須入力です'
      },
    }
  });

  $('input[name="test_text"]').on('keyup', function(){
    if ($('input[name="test_id"]').val() == 'test') {
      $('input[name="test_text"]').rules('remove', 'required');
    } else {
      $('input[name="test_text"]').rules('add', 'required');
    }
    $('form').valid();
  });
});
</script>

グループ(複数)項目に対してどれかを必須

「固定電話と携帯番号のどちらかを必須」などグループ(複数項目)に対して「どちらかは必須」としたい場合は下記のようにします。
※require_from_groupを使用するには「additional-methods.min.js」が必要です

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<form>
  <div>
    <label for="tel">電話番号</label>
    <input type="tel" name="tel" class="contact">
  </div>
  <div>
    <label for="mobile">携帯電話</label>
    <input type="tel" name="mobile" class="contact">
  </div>
  <input type="submit" value="submit">
</form>
<script>
$(function(){
  $('form').validate({
    rules: {
      tel: {
        require_from_group: [1,".contact"]
      },
      tel: {
        require_from_group: [1,".contact"]
      }
    },
    messages: {
      tel: {
        require_from_group: '電話番号か携帯番号のどちらかを入力してください'
      },
      tel: {
        require_from_group: '電話番号か携帯番号のどちらかを入力してください'
      },
    }
  });
});
</script>

グループの項目に対して全て必須

<form>
  <input type="text" name="test_text" class="test_group">
  <input type="text" name="test_id" class="test_group">
  <input type="submit" value="submit">
</form>
<script>
$(function(){
  $('form').validate({
    rules: {
      test_text: {
        require_from_group: [2,".test_group"]
      },
       test_id: {
        require_from_group: [2,".test_group"]
      }
    },
    messages: {
      test_text: {
        require_from_group: '全て入力してください'
      },
      test_id: {
        require_from_group: '全て入力してください'
      },
    }
  });
});
</script>

他の項目が特定の値の場合は必須とする

「入力フォームAが特定の値や特定の値以上(未満)の場合は入力フォームBは必須とする」ということも可能です。

あまりいい例が思いつかないですが、例えば「別ページからフォーム画面に遷移してきたときにパラメータを持っていて、そのパラメータが特定の値はある入力フォームを必須にする」という感じでしょうか。

<form>
  <div>
    <input type="text" name="test_text">
    <input type="hidden" id="test_code" name="test_code" value="test12345">
  </div>
</form>
<script>
$(function(){
  $('form').validate({
    rules: {
      test_text: {
        required: $(test_code).val() === 'test12345':,
      },
    },
    messages: {
      test_text: {
        required: '必須項目です'
      },
    }
  });
});
</script>

チェックボックスやラジオボタンがチェックされていたらバリデーションを実行

「:checked」は「メールマガジンの配信を希望する」のチェックボックスにチェックしたときだけメールアドレスの入力を必須にするとかのケースで使います。

<form>
  <div>
    <label for="mail_check">メールマガジンの配信を希望する</label>
    <input type="checkbox" id="mail_check" name="mail_check">
  </div>
  <div>
    <label for="email">メールアドレス</label>
    <input type="email" name="email">
  </div>
  <input type="submit" value="submit">
</form>
<script>
$(function(){
  $('form').validate({
    rules: {
      email: {
        required: '#mail_check:checked',
      },
    },
    messages: {
      email: {
        required: 'メールマガジンの配信を希望する場合はメールアドレスを入力してください'
      },
    }
  });
});
</script>

他の入力項目の値と等しいかをチェック

入力された「メールアドレス」と「確認用メールアドレス」の値が等しいかのチェックなどで使用します。

<form>
  <div>
    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email">
  </div>
  <div>
    <label for="confirm_email">確認用メールアドレス</label>
    <input type="email" name="confirm_email">
  </div>
  <input type="submit" value="submit">
</form>
<script>
  $('form').validate({
    rules: {
      email: {
        required: true,
      },
      confirm_email: {
        required: true,
        equalTo: '#email',
      }
    },
    messages: {
      email: {
        required: 'メールアドレスを入力してください'
      },
      confirm_email: {
        required: '確認用メールアドレスを入力してください',
        equalTo: '確認用メールアドレスが異なります',
      }
    }
  });
</script>

バリデーションを実行しない

登録・更新時はバリデーションチェックしたいけど削除時はチェックしたくないなどバリデーションを実行したくない場合はsubmitボタンにformnovalidate属性を追加します。

<input type="submit" formnovalidate value="submit">

エラーメッセージをクリア(非表示)する

「resetForm()」を使えば表示されているエラーメッセージをクリア(非表示)できます。

<form>
  <div>
    <label for="test_text">テストテキスト</label>
    <input type="text" name="test_text">
  </div>
  <input type="submit" value="submit">
  <input type="button" class="reset" value="reset" formnovalidate>
</form>
<script>
$(function(){
  var validator = $('form').validate({
    rules: {
      test_text: {
        required: true,
        minlength: 10
      },
    },
    messages: {
      test_text: {
        required: '入力してください',
        minlength: '10文字以上で入力してください'
      },
    }
  });
  $('.reset').on('click', function(){
    validator.resetForm();
  });
});
</script>

ヴァリデーションエラーの数を表示する

<form>
  <div>
    <label for="test_text">テストテキスト</label>
    <input type="text" name="test_text"><br>
    <label for="test_text_2">テストテキスト2</label>
    <input type="text" name="test_text_2">
  </div>
  <div class="error"></div>
  <input type="submit" value="submit">
</form>
<script>
$(function(){
  var validator = $('form').validate({
    rules: {
      test_text: {
        required: true,
        minlength: 10
      },
      test_text_2: {
        required: true,
        minlength: 10
      },
    },
    messages: {
      test_text: {
        required: '入力してください',
        minlength: '10文字以上で入力してください'
      },
      test_text_2: {
        required: '入力してください',
        minlength: '10文字以上で入力してください'
      },
    },
    invalidHandler: function() {
      $('.error').text('入力エラーが' + validator.numberOfInvalids() + '個あります');
    }
  });
});
</script>

↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！
にほんブログ村 IT技術ブログへ
にほんブログ村

前の記事

2020年がまだ3ヶ月しか経ってないのにマラソン関係の重大ニュ…

次の記事

2019年度のマラソンの成績をまとめてみた