jQuery Validation 独自のルールを追加する

jQuery Validation Plugin

独自ルールの追加方法をメモしておきます。


addMethod



独自ルールの追加方法は、jQuery Validation Pluginオフィシャルで提供されている
additional-methods.jsが参考になるかと思います。
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.js

基本形はこのような形です。


  1. $.validator.addMethod([ルール名], function(value, element) {
  2.     // お決まりの定型文
  3.     // 検証対象の要素にこのルールが設定されているか
  4.     if ( this.optional( element ) ) {
  5.         return true;
  6.     }
  7.     // value:検証対象の値
  8.     // ルールが設定されている要素(jQuery Object)
  9.     // true:検証通過 false:検証不可
  10. }, [エラー時に表示するメッセージ]);





サンプル



例として「入力が123であるか」をチェックする「my_rule」を追加してみます。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <title>validator sample</title>
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <body>
  9.     <form id="commentForm" action="">
  10.         <fieldset>
  11.             <legend>validationテスト</legend>
  12.             <p>
  13.                 <label for="cemail">メールアドレス</label>
  14.                 <input id="cemail" name="email" type="text">
  15.             </p>
  16.         </fieldset>
  17.         <p>
  18.             <input class="submit" type="submit" value="Submit">
  19.         </p>
  20.     </form>
  21.     <p>
  22.         <div id="message"></div>
  23.     </p>
  24. </body>
  25. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  26. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
  27. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_ja.min.js"></script>
  28. <script>
  29. $(function() {
  30.     $.validator.addMethod('my_rule', function(value, element) {
  31.         // お決まりの定型文
  32.         // 検証対象の要素にこのルールが設定されているか
  33.         if ( this.optional( element ) ) {
  34.             return true;
  35.         }
  36.         if (value != '123') {
  37.             return false;
  38.         }
  39.         return true;
  40.     }, '123を入力してください');
  41.     $("#commentForm").validate({
  42.         rules: {
  43.             email: {
  44.                 required: true,
  45.                 my_rule: true
  46.             }
  47.         }
  48.     });
  49. })
  50. </script>
  51. </html>



狙い通りの動作です。

982_01.png



パラメーターを伴う検証



例えばルールに指定した値と同じであるかチェックを行いたい場合を考えてみます。
addMethodの第三引数にrulesで設定した値が渡されますので、それを利用してエラーチェックを行います。
表示するエラーメッセージのフォーマットにも値が渡されるので、エラー表示にも利用できます。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <title>validator sample</title>
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <body>
  9.     <form id="commentForm" action="">
  10.         <fieldset>
  11.             <legend>validationテスト</legend>
  12.             <p>
  13.                 <label for="cemail">メールアドレス</label>
  14.                 <input id="cemail" name="email" type="text">
  15.             </p>
  16.         </fieldset>
  17.         <p>
  18.             <input class="submit" type="submit" value="Submit">
  19.         </p>
  20.     </form>
  21.     <p>
  22.         <div id="message"></div>
  23.     </p>
  24. </body>
  25. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  26. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
  27. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_ja.min.js"></script>
  28. <script>
  29. $(function() {
  30.     $.validator.addMethod('my_rule', function(value, element, param) {
  31.         // お決まりの定型文
  32.         // 検証対象の要素にこのルールが設定されているか
  33.         if ( this.optional( element ) ) {
  34.             return true;
  35.         }
  36.         if (value != param) {
  37.             return false;
  38.         }
  39.         return true;
  40.     }, jQuery.validator.format("{0}を入力してください"));
  41.     $("#commentForm").validate({
  42.         rules: {
  43.             email: {
  44.                 required: true,
  45.                 my_rule: 'abc'
  46.             }
  47.         }
  48.     });
  49. })
  50. </script>
  51. </html>



982_02.png


実行サンプルはこちら
https://symfo.web.fc2.com/js-sample/jq/jv_sample04.html
関連記事

コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
https://symfo.web.fc2.com/

PR

検索フォーム

月別アーカイブ