web-dev-qa-db-ja.com

クラスごとにjquery検証プラグインのルールを指定するにはどうすればよいですか？

jQuery Validationプラグイン は非常に機能し、非常に使いやすいです。

$(".selector").validate({
})

「必要なメール」のようなcssクラスを設定するだけで、デフォルトのメッセージが表示されます。

ただし、メッセージをカスタマイズする必要があります。ドキュメントには、要素とそれに対応するメッセージのキーと値のペアを使用してルールを指定できると書かれています。

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
       email: "Your email address must be in the format of [email protected]"
     }
   }
})

ただし、すべてのフォーム要素、特にASP.NETのサーバー生成コントロールにルールを指定することは実用的ではありません。すべての要素に適用されるルールを指定することは可能ですか？または、何らかの方法でクラスセレクターを使用できますか？

私は次のことを試しましたが、うまくいきませんでした：

$("#frmMyForm").validate
({
    rules:
    {
        $(".required email"):
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        $(".required email"):
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of [email protected]"
        }
    }
});

これには構文エラーがあるように見えました-プラグインは何もしませんでした。それから私は試しました：

$("#frmMyForm").validate
({
    rules:
    {
        ".required email":
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        ".required email":
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of [email protected]"
        }
    }
});

これには構文エラーはありませんでした-プラグインは機能しましたが、ルール/カスタムメッセージは無視しました。ここで誰かがjQuery Validationプラグインを使用しましたか？ある場合、複数の要素にルール/カスタムメッセージをどのように適用しましたか？

ありがとう！

jqueryjquery-validate
37
Zesty

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

HTML：

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

JS：

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

[〜＃〜] demo [〜＃〜]： http://jsfiddle.net/rq5ra/

注：以下のどの手法を使用してルールを割り当てようとも、すべての要素にuniquename属性。

オプション1a）目的の共通ルールに基づいてフィールドにクラスを割り当ててから、それらのルールをクラスに割り当てることができます。カスタムメッセージを割り当てることもできます。

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" />
_

.rules()メソッドmustを呼び出す必要がありますafter呼び出し.validate()

JS：

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

$('.num').each(function() {
    $(this).rules('add', {
        required: true,
        number: true,
        messages: {
            required:  "your custom message",
            number:  "your custom message"
        }
    });
});
_

[〜＃〜] demo [〜＃〜]： http://jsfiddle.net/rq5ra/1/

オプション1b）上記と同じですが、classを使用する代わりに、name属性の共通部分と一致します。

_$('[name*="field"]').each(function() {
    $(this).rules('add', {
        required: true,
        number: true,
        messages: { // optional custom messages
            required:  "your custom message",
            number:  "your custom message"
        }
    });
});
_

[〜＃〜] demo [〜＃〜]： http://jsfiddle.net/rq5ra/6/

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

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

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

[〜＃〜] demo [〜＃〜]： http://jsfiddle.net/rq5ra/4/

オプション2b）上記の2aに関連していますが、複雑さのレベルに応じて、特定のグループに共通のルールを分離し、 .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

var ruleSet3 = { };
$.extend(ruleSet3, ruleSet1, ruleSet2); // combines sets 2 & 1 into set 3.  Defaults are included since they were already combined into sets 1 & 2 previously.

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

最終結果：

  • _field_1_は3以上の必須の数値になります。
  • _field_2_は必要な数になります。
  • _field_3_は99以下の必須の数値になります。
  • _field_4_は3から99の間の必須の数値になります。

[〜＃〜] demo [〜＃〜]： http://jsfiddle.net/rq5ra/5/

74
Sparky

次のように addClassRules を使用できます。


jQuery.validator.addClassRules("name", {
  required: true,
  minlength: 2
});
24
Sudhir Bastakoti

jQuery.validator.addClassRules();は検証をクラスに添付しますが、メッセージのオプションはなく、一般的なエラーメッセージを使用します。

それを機能させたい場合は、このようなルールをリファクタリングする必要があります

$.validator.addMethod(
     "newEmail", //name of a virtual validator
     $.validator.methods.email, //use the actual email validator
     "Random message of email"
);

//Now you can use the addClassRules and give a custom error message as well.
$.validator.addClassRules(
   "email", //your class name
   { newEmail: true }
 );
18
Starx

Starxの答えに基づいて、デフォルトのメソッドを使用し、特定のクラスの新しいエラーメッセージを作成する、反復可能で使いやすい関数を作成しました。特定のクラスは、既存のメソッドを使用して多くの異なるクラス名でこれを再利用する競合が発生しない限り、メッセージのオーバーライドにのみ使用されるという事実を考慮してください。

var CreateValidation = function(className, customMessage, validationMethod){
  var objectString = '{"'+ className +'": true}',
  validator = $.validator;

  validator.addMethod(
    className,
    validator.methods[validationMethod],
    customMessage
  );
  validator.addClassRules(
    className,
    JSON.parse(objectString)
  );
};

検証クラスが「validation-class-firstname」である使用例：

CreateValidation('validation-class-firstname', 'Please enter first name', 'required');
0
TheRumIsGone
$.validator.addMethod("cMaxlength", function(value, element, param) {
                
        return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, '{0}');
0
Jaimin Soni

代替アプローチ：

$.validator.addMethod("cMaxlength", function(value, element, param) {
                
        return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, '{0}');

要点： https://Gist.github.com/uhtred/833f3b957d61e94fbff6

$.validator.addClassRules({
    'credit-card': {
        cMaxlength: [ 'Invalid number.', 19 ]
    }
});
0
Daniel França

AddClassRulesメソッドを使用してクラスルールを追加できます。

例えば。

$.validator.addClassRules("your-class", {
  required: true,
  minlength: 2
});

https://jqueryvalidation.org/jQuery.validator.addClassRules/

0
user3539640
$.validator.addMethod("cMaxlength", function(value, element, param) {
                
        return $.validator.methods.maxlength.call(this, value, element, param[1]);

}, '{0}');
0
alok patel