web-dev-qa-db-ja.com

jQuery Validationプラグイン-複数のフィールドに適用されるルールを追加する

jQuery Validation プラグインを使用しています：

同じルールを適用したい大きなフォームのフィールドがいくつかあります。この例のコードを簡略化しました。このコードは機能しませんが、このようなことをしたいです。 2番目のルールは、first_nameとlast_nameの両方に適用する必要があります。ここですべてのルールをこの関数にカプセル化し、一部のフォーム要素のクラスリストを編集して必要なクラスなどを追加しないようにします。

（繰り返しますが、グループ化する要件が異なるフォームフィールドのいくつかの異なるグループがあります。簡単にするために、その要素にはrequired: trueのみを配置しています）

$('#affiliate_signup').validate(
       {
          rules: 
          {
            email: {
                required: true,
                email: true
            },
            first_name,last_name: {
                required: true
            },
            password: {
                required: true,
                minlength: 4
            }
          }
       });

前もって感謝します。

jqueryjquery-validate
29
benino

私の例では、これが基本的な開始コードです。

HTML：

<input type="text" name="field_1" />
<input type="text" name="field_2" />
<input type="text" name="field_3" />

jQuery：

$('#myForm').validate({
    rules: {
        field_1: {
            required: true,
            number: true
        },
        field_2: {
            required: true,
            number: true
        },
        field_3: {
            required: true,
            number: true
        }
    }
});

http://jsfiddle.net/9W3F7

オプション1a）ルールのグループを引き出して、共通の変数に結合できます。

var ruleSet1 = {
        required: true,
        number: true
    };

$('#myForm').validate({
    rules: {
        field_1: ruleSet1,
        field_2: ruleSet1,
        field_3: ruleSet1
    }
});

http://jsfiddle.net/9W3F7/1

オプション1b）上記1aに関連していますが、複雑さのレベルに応じて、特定のグループに共通のルールを分離し、 .extend() を使用して再結合できます無限の方法で。

var ruleSet_default = {
        required: true,
        number: true
    };

var ruleSet1 = {
        max: 99
    };
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1

var ruleSet2 = {
        min: 3
    };
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2

$('#myForm').validate({
    rules: {
        field_1: ruleSet2,
        field_2: ruleSet_default,
        field_3: ruleSet1
    }
});

最終結果：

  • field_1は3以上の必須の番号になります。

  • field_2は必須の数字になります。

  • field_3は99以下の必須の数値になります。

http://jsfiddle.net/9W3F7/2

オプション2a）目的の一般的なルールに基づいてフィールドにクラスを割り当ててから、それらのルールをクラスに割り当てることができます。 addClassRulesメソッドを使用して、複合ルールを取得し、それらをクラス名に変換しています。

HTML：

<input type="text" name="field_1" class="num" />
<input type="text" name="field_2" class="num" />
<input type="text" name="field_3" class="num" />

jQuery：

$('#myform').validate({ // initialize the plugin
    // other options
});

$.validator.addClassRules({
    num: {
        required: true,
        number: true
    }
});

http://jsfiddle.net/9W3F7/4/

オプション2b）オプション2aとの主な違いは、これを使用して、作成した直後にrules('add')メソッドを呼び出すことにより、動的に作成された入力要素にルールを割り当てることができることです。あなたはcouldセレクタとしてclassを使用できますが、必須ではありません。以下に示すように、classの代わりにワイルドカードセレクターを使用しました。

.rules()メソッドmustは、.validate()を呼び出した後afterいつでも呼び出す必要があります。

jQuery：

$('#myForm').validate({
    // your other plugin options
});

$('[name*="field"]').each(function() {
    $(this).rules('add', {
        required: true,
        number: true
    });
});

http://jsfiddle.net/9W3F7/5/

ドキュメント：

89
Sparky

この方法で 'getter'構文を使用できます

   {
      rules: 
      {
        email: {
            required: true,
            email: true
        },

        first_name: {
            required: true
        },

        get last_name() {return this.first_name},

        password: {
            required: true,
            minlength: 4
        }
      }
   }
0
Antonio Clemente

私があなたを正しく理解していれば、あなたは多くのルールを多くのフィールドに適用したいと思うでしょう。ただし、jQuery validateを使用すると、1つの入力フィールドに複数のルールを設定できます。ここでは配列表記を使用してください。

ユースケースを達成するには、各入力フィールドに適用するルールとともにdata属性を追加するだけです。最適な場合は、URLエンコードされたJSON形式を使用して、各入力フィールドごとに1つのdata属性のみが必要になるようにします。例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>validate test</title>
</head>
<body>
<form id="myForm" name="myForm" method="post" action="www.example.com/my-url">
    <input type="text" name="txt1" data-rules="%7B%22required%22%3Atrue%2C%22minlength%22%3A2%2C%22maxlength%22%3A10%7D" />
    <input type="text" name="txt2" data-rules="%7B%22required%22%3Atrue%2C%22minlength%22%3A2%2C%22maxlength%22%3A10%7D" />
    <input type="number" name="number1" data-rules="%7B%22required%22%3Atrue%2C%22number%22%3Atrue%2C%22min%22%3A1%2C%22max%22%3A999%7D" />
    <input type="email" name="email1" data-rules="%7B%22required%22%3Atrue%2C%22email%22%3Atrue%2C%22minlength%22%3A20%7D" />
    <input type="email" name="email2" data-rules="%7B%22required%22%3Atrue%2C%22email%22%3Atrue%2C%22minlength%22%3A20%7D" />
</form>
<script type="text/javascript">
    var $field = null;
    var rules = {};

    $('#myForm input, #myForm textarea').each(function (index, field) {
        $field = $(field);
        rules[$field.attr('name')] = JSON.parse(decodeURIComponent($field.attr('data-rules')));
    });

    $('#myForm').validate(rules);
</script>
</body>
</html>

その背後にある基本的な技術は簡単です。

  1. `data-``属性を使用してフィールドを作成します。
  2. 各入力フィールドをループして、適用するルールを取得します。
  3. 収集したルールをフォーム要素に適用します

また、同じバリデータを持つ入力グループをそのまま使用することもできます。 g。そのためのクラスとルールオブジェクトで事前定義されたJavaScript変数を使用します。あなたはエレガントな方法で怠laになる方法についてのアイデアを得たと思う;-)

0
alpham8