web-dev-qa-db-fra.com

plug-in de validation jQuery - ajout de règles s'appliquant à plusieurs champs

J'utilise le plugin jQuery plugin:

Je souhaite appliquer les mêmes règles à plusieurs champs d'un grand formulaire. J'ai simplifié le code pour cet exemple. Ce code ne fonctionne pas, mais je veux faire quelque chose comme ça. La deuxième règle devrait s'appliquer à la fois à first_name et à last_name. Je veux encapsuler toutes les règles ici dans cette fonction et ne pas modifier les listes de classes de certains éléments de formulaire pour ajouter une classe requise ou autre.

(Encore une fois, je souhaite regrouper plusieurs groupes de champs de formulaire avec des exigences différentes. Je ne mets que required: true dans cet élément pour simplifier)

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

Merci d'avance. 

jqueryjquery-validate
27
benino

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

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

Option 1a) 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
    }
});

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

Option 1b) Relatif à 1a 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

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

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.

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

Option 2a) Vous pouvez affecter des classes à vos champs en fonction des règles communes souhaitées, puis affecter ces règles aux classes. En utilisant la méthode addClassRules, nous prenons des règles composées et les transformons en un nom de classe.

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/

Option 2b) La principale différence par rapport à l'option 2a est que vous pouvez l'utiliser pour affecter des règles à des éléments d'entrée créés dynamiquement en appelant la méthode rules('add') immédiatement après leur création. Vous (pourriez} _ utiliser class comme sélecteur, mais ce n'est pas obligatoire. Comme vous pouvez le voir ci-dessous, nous avons utilisé un sélecteur générique au lieu de class.

La méthode .rules()doit être appelée à tout moment après invoquant .validate().

jQuery:

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

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

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

Documentation:

85
Sparky

Vous pouvez utiliser la syntaxe 'getter' de cette manière: 

   {
      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

Si je vous ai bien compris, vous souhaitez appliquer de nombreuses règles à de nombreux champs, cela peut différer selon les règles, mais vous êtes trop paresseux pour répéter les mêmes règles dans d’autres champs . Cependant, avec jQuery validate, il est possible de avoir plus d'une règle sur un champ de saisie. Utilisez simplement la notation de tableau ici.

Pour réaliser votre cas d'utilisation, ajoutez simplement des attributs data à chaque champ de saisie avec les règles que vous souhaitez lui appliquer. Dans le meilleur des cas, utilisez un format JSON codé en URL, de sorte que vous n’ayez besoin que d’un attribut data pour chaque champ de saisie. Par exemple.:

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

La technologie de base derrière cela est simple:

  1. Créez vos champs avec l'attribut `data-``.
  2. Faites une boucle sur chaque champ de saisie pour récupérer les règles que vous souhaitez y appliquer.
  3. Appliquez vos règles collectées à l'élément de formulaire

Vous pouvez également utiliser des groupes d'entrée avec les mêmes validateurs de cette façon, e. g. en utilisant des classes pour cela et des variables JavaScript prédéfinies avec l'objet rules. Je pense que tu as eu l'idée de devenir élégant paresseux ;-)

0
alpham8