web-dev-qa-db-fra.com

Comment pouvons-nous spécifier des règles pour le plugin de validation jquery par classe?

Le plugin jQuery Validation fonctionne très bien et est très facile à utiliser:

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

Il suffit de définir des classes CSS comme "e-mail requis" pour afficher le message par défaut.

Cependant, je dois personnaliser les messages. La documentation indique que vous pouvez spécifier des règles à l'aide d'une paire clé-valeur pour les éléments et leurs messages correspondants:

$(".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]"
     }
   }
})

Toutefois, il n'est pas pratique de spécifier une règle pour chaque élément de formulaire, en particulier les contrôles générés par le serveur dans ASP.NET. Est-il possible de spécifier des règles qui s'appliqueraient à TOUS les éléments? Ou puis-je utiliser un sélecteur de classe en quelque sorte?

J'ai essayé ce qui suit, mais cela n'a pas fonctionné:

$("#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]"
        }
    }
});

Cela semblait avoir une erreur de syntaxe - le plugin n'a rien fait. Puis j'ai essayé:

$("#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]"
        }
    }
});

Cela n'a eu aucune erreur de syntaxe - le plugin a fonctionné, mais il a ignoré les règles/messages personnalisés. Est-ce que quelqu'un ici a utilisé le plugin jQuery Validation? Si oui, comment avez-vous appliqué des règles/messages personnalisés à plusieurs éléments?

Merci!

jqueryjquery-validate
37
Zesty

Pour les besoins de mon exemple, voici le code de départ de la base:

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/

NOTE: Quelle que soit la technique utilisée ci-dessous pour assigner des règles, il est absolument nécessaire que chaque élément possède un attribut uniquename.

Option 1a) Vous pouvez affecter des classes à vos champs en fonction des règles communes souhaitées, puis affecter ces règles aux classes. Vous pouvez également attribuer des messages personnalisés.

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

La méthode .rules()doit être appelée après invoquant .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/

Option 1b) Comme ci-dessus, mais au lieu d'utiliser une class, elle correspond à une partie commune de l'attribut 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/

Option 2a) Vous pouvez extraire les groupes de règles et les combiner en variables communes.

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

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

DEMO: http://jsfiddle.net/rq5ra/4/

Option 2b) Relatif à 2a ci-dessus, mais selon votre niveau de complexité, peut séparer les règles communes à certains groupes et utiliser .extend() pour les recombiner de manière infinie.

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
    }
});

Résultat final:

  • field_1 sera un nombre requis pas moins de 3.
  • field_2 sera juste un nombre requis.
  • field_3 sera un nombre requis non supérieur à 99.
  • field_4 sera un nombre requis compris entre 3 et 99.

DEMO: http://jsfiddle.net/rq5ra/5/

72
Sparky

Vous pouvez utiliser addClassRules , comme:


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

jQuery.validator.addClassRules(); attachera la validation à la classe, mais il n'y a pas d'option pour les messages, il utilisera les messages d'erreur généraux.

Si vous voulez que cela fonctionne alors, vous devriez reformuler les règles comme celle-ci

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

Je me suis inspiré de la réponse de Starx pour créer une fonction reproductible, facile à utiliser, qui utilise les méthodes par défaut et crée de nouveaux messages d'erreur pour des classes spécifiques. compte tenu du fait que votre classe spécifique ne sera utilisée que pour remplacer le message une fois que vous ne devriez plus avoir de conflit le réutilisant pour de nombreux noms de classe différents à l'aide de méthodes existantes.

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)
  );
};

Exemple d'utilisation avec la classe de validation étant "validation-classe-prénom":

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

Approche alternative:

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

}, '{0}');

Gist: https://Gist.github.com/uhtred/833f3b957d61e94fbff6

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

0
Daniel França

Vous pouvez ajouter des règles de classe à l'aide de la méthode addClassRules:

Par exemple. 

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