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

公式サイト

https://jqueryvalidation.org/

まずは最低限の使い方。

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

※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>

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

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

テキストボックスに入力したときなど、任意のタイミングでバリデーションを実行する場合

「valid()」を使えばバリデーションを実行してくれる

<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(){
    $('form').valid();
  });
});
</script>

IDやメールアドレスを入力した際にすでに使用されているかDBに聞きにいくなどサーバー側でチェックを行いたい場合は「remote」を使う

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

validate.php

<?php
  $test_text = $_REQUEST['test_text'];
  $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;
?>

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

<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>

特定の条件のときにバリデーションルールの追加・削除

<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>
  <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:[1,".test_group"]
      },
       test_id:{
        require_from_group:[1,".test_group"]
      }
    },
    messages:{
      test_text:{
        require_from_group:'subete'
      },
      test_id:{
        require_from_group:'subete'
      },
    }
  });
});
</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:'subete'
      },
      test_id:{
        require_from_group:'subete'
      },
    }
  });
});
</script>

登録・更新時はバリデーションチェックしたいけど削除時はチェックしたくないみたいな場合

submitボタンにformnovalidate属性を追加

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


コメントを残す

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

CAPTCHA