web-dev-qa-db-fra.com

Déclarer jQuery Valider les règles du plug-in - attribut vs classe vs code

Dans les exemples du plug-in jQuery Validate, je vois trois approches différentes pour déclarer des règles de validation:

  • Classes CSS - par exemple <input type="text" name="whatever" class="required" />
  • Attributs - par exemple <input type="text" name="whatever" required />
  • Code JS - par exemple $("#myForm").validate({ rules: { whatever: "required", ... } });

Mais je ne vois nulle part dans la documentation qui explique pourquoi vous utiliseriez l'une sur l'autre. Je ne vois pas non plus d'explication sur l'utilisation des méthodes de validation avec chaque approche (par exemple, comment utiliseriez-vous la méthode "max (value)" avec un attribut tag ou une classe css?).

Quels sont les compromis entre ces trois approches? Et comment déclarez-vous exactement les différentes méthodes de validation utilisant chaque approche?

jqueryjquery-validate
25
Jordan Lev

Vous pouvez appliquer des règles via des attributs de règles de données. C'est le moyen le plus simple et peut-être le meilleur moyen de maintenir un code propre ...

Exemple:

<form id="myform">
    <input type="text" name="email" data-rule-required="true" data-rule-email="true">    
    <input type="text" name="password" id="password" data-rule-required="true" data-rule-minlength="6">
    <input type="text" name="password-confirm" data-rule-required="true" data-rule-minlength="6" data-rule-equalto="#password">
</form>

Vous pouvez même fournir des messages via des attributs de données:

<input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address" />

En JavaScript, il suffit d'appeler:

$('#myform').validate();
36
Primoz Rome

De la documentation http://jqueryvalidation.org/rules :

Il existe plusieurs façons de spécifier des règles de validation.

  • Les méthodes de validation sans paramètre peuvent être spécifiées en tant que classes sur l'élément (recommandé)
  • Les méthodes de validation avec paramètres peuvent être spécifiées en tant qu'attributs (recommandé)
  • Les deux peuvent être spécifiés en tant que métadonnées à l'aide du plugin métadonnée
  • Les deux peuvent être spécifiés en utilisant l'option rules de la méthode validate () -

https://stackoverflow.com/a/14380401/749227 contient des informations utiles supplémentaires.

Je préfère cependant utiliser l'attribut "requis" sur une classe. Je ne trouve pas que ce type d'attribut natif le supporte directement référencé dans la documentation, mais puisqu'il semble que les lecteurs d'écran le trouveraient plus utile que class = "required", je vais dans ce cas avec celui-ci.

En passant, j'aimerais voir quels autres attributs autochtones sont respectés par le plugin. Et des informations sur lesquels d'entre eux sont captés par les ADT.

2
jinglesthula

En réponse à vos questions spécifiques:

"Comment utiliseriez-vous la méthode" max (valeur) "avec un attribut de balise" 

<input id="mytext" name="mytext" max="2"/>

"Comment utiliseriez-vous la méthode" max (valeur) "avec une classe ... CSS"

Vous ne pouvez pas faire cela. Utilisez l’une des méthodes suivantes pour configurer la règle.

1
Dr Blowhard

vous pouvez utiliser l'attribut data-rule-required, veuillez ne pas utiliser jquery.metadata.js, j'ai un test dans jQuery Validation Plugin 1.11.1

0
Gavin