validate.jsの使い方をまとめてみた

validate.jsの使い方をまとめてみました。

validate.jsの公式サイトはこちら

最低限の使い方

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

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

※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 name="test_text" type="text">
  <input type="submit" value="submit">
</form>
<script>
$(function(){
  $('form').validate({
    rules:{
      test_text:{
        required: true
      }
    },
  });
});
</script>

ルール一覧

ルール 説明 設定例 備考
required 必須チェック required:true trueで必須チェックを行う。
テキストだけでなく、プルダウン、ラジオボタン、チェックボックスも必須チェック可能
remote サーバー側でチェックを行う remote:”validate.php” メールアドレスやIDがすでに登録されているかのチェックなどサーバー側でチェックしたい場合に使用する
minlength 最小文字数チェック minlength:5 5文字未満はバリデーションエラー
maxlength 最大文字数チェック maxlength:10 11文字以上はバリデーションエラー
rangelength 文字列が指定した範囲内の長さか、チェックボックスの選択数が指定した範囲内の個数かのチェック rangelength:[5, 10] 5文字未満もしくは11文字以上はバリデーションエラー
min 最小数値以上かのチェック min:20 20未満はバリデーションエラー
max 最大数値以下かのチェック max:50 51以上はバリデーションエラー
range 入力値が指定した範囲内の値かのチェック range 5未満または11以上はバリデーションエラー
step 指定した数値かどうかのチェック step:10 10以外はバリデーションエラー
email メールアドレス形式化どうかのチェック email:true falseだとチェックを行わない
url URL形式化どうかのチェック 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
equalTo 2つのフォームの入力値が等しいかどうかのチェック 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 name="test_text" type="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 name="test_text" type="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(){
    console.log($('form').valid());
      if (!$('form').valid()) {
        alert('入力エラーがあります');
      }
    });
  });
</script>

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

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

<form>
  <div>
    <lable>ユーザーID</label>
    <input name="user_id" type="text">
  </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'];
  // validateで何らかのチェック
  $result = validate($test_text);
  if ($result) {
    echo 'true';
  } else {
    echo 'false';
  }
  exit;
?>

複数の項目のチェック

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

<form>
  <input name="test_text" type="text">
  <input name="test_id" type="text">
  <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 = validate($test_text, $test_id);
  if ($result) {
    echo 'true';
  } else {
    echo 'false';
  }
  exit;
?>

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

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

<form>
  <input name="test_text" type="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 name="test_text" type="text">
  <input name="test_id" type="text">
  <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 name="tel" class="contact" type="text">
  </div>
  <div>
    <label for="mobile">携帯電話</label>
    <input name="mobile" class="contact" type="text">
  </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 name="test_text" class="test_group" type="text">
  <input name="test_id" class="test_group" type="text">
  <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>

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

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

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

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

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

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

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

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

<form>
  <div>
    <label for="test_text">テストテキスト</label>
    <input name="test_text" type="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 name="test_text" type="text"><br>
    <label for="test_text_2">テストテキスト2</label>
    <input name="test_text_2" type="text">
  </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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA