« Mais jQuery ne facilite-t-il pas l’écriture de votre propre plugin de validation? »
Bien sûr, mais il y a encore beaucoup de subtilités à prendre en charge: Vous avez besoin d’une bibliothèque standard de méthodes de validation (telles que les e-mails, les URL, les numéros de carte de crédit). Vous devez placer des messages d’erreur dans le DOM et les afficher et les masquer le cas échéant. Vous voulez réagir à plus qu’un simple événement de soumission, comme keyup et blur.
Vous pouvez avoir besoin de différentes façons de spécifier des règles de validation en fonction de l’environnement côté serveur que vous utilisez sur différents projets. Et après tout, vous ne voulez pas réinventer la roue, n’est-ce pas?

 » Mais n’y a-t-il pas déjà une tonne de plugins de validation ? »
À droite, il y a beaucoup de solutions non basées sur jQuery (que vous éviteriez depuis que vous avez trouvé jQuery) et certaines solutions basées sur jQuery. Celui-ci est l’un des plus anciens plugins jQuery (lancé en juillet 2006) et a fait ses preuves dans des projets partout dans le monde. Il y a aussi un article discutant de la façon dont ce plugin correspond à la facture de la solution de validation attendue.

Pas convaincu ? Jetez un coup d’œil à cet exemple:

<form class="cmxform" method="get" action="">
 <fieldset>
 <legend>Please provide your name, email address (won't be published) and a comment</legend>
 <p>
 <label for="cname">Name (required, at least 2 characters)</label>
 <input name="name" minlength="2" type="text" required>
 </p>
 <p>
 <label for="cemail">E-Mail (required)</label>
 <input type="email" name="email" required>
 </p>
 <p>
 <label for="curl">URL (optional)</label>
 <input type="url" name="url">
 </p>
 <p>
 <label for="ccomment">Your comment (required)</label>
 <textarea name="comment" required></textarea>
 </p>
 <p>
 <input class="submit" type="submit" value="Submit">
 </p>
 </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

le lien N’est-il pas agréable et facile?

Une seule ligne de jQuery pour sélectionner le formulaire et appliquer le plugin de validation, plus quelques annotations sur chaque élément pour spécifier les règles de validation.

Bien sûr, ce n’est pas le seul moyen de spécifier des règles. Vous n’avez pas non plus à vous fier à ces messages par défaut, mais ils sont utiles lorsque vous commencez à configurer la validation d’un formulaire.

liez quelques éléments à surveiller lors de la lecture de la démo

• Après avoir essayé de soumettre un formulaire invalide, le premier élément invalide est focalisé, permettant à l’utilisateur de corriger le champ. Si un autre champ non valide – qui n’était pas le premier – était focalisé avant la soumission, ce champ est focalisé à la place, ce qui permet à l’utilisateur de commencer par le bas s’il le souhaite.
• Avant qu’un champ ne soit marqué comme invalide, la validation est paresseuse: Avant de soumettre le formulaire pour la première fois, l’utilisateur peut parcourir les champs sans recevoir de messages gênants – il ne sera pas mis sur écoute avant d’avoir la possibilité de saisir une valeur correcte
• Une fois qu’un champ est marqué comme invalide, il est: Dès que l’utilisateur a entré la valeur nécessaire, le message d’erreur est supprimé
• Si l’utilisateur entre quelque chose dans un champ non marqué, et s’en éloigne / clique (flou le champ), il est validé – évidemment l’utilisateur avait l’intention de saisir quelque chose, mais n’a pas réussi à entrer la valeur correcte

Ce comportement peut être irritant lors du clic sur les démos du plugin de validation – il est conçu pour une expérience utilisateur discrète, gênant le moins possible l’utilisateur avec des messages d’erreur inutiles. Donc, lorsque vous essayez d’autres démos, essayez de réagir comme l’un de vos utilisateurs le ferait, et voyez si le comportement est meilleur. Si ce n’est pas le cas, veuillez me faire part de vos idées d’améliorations!

Documentation de l’API de lien

Vous recherchez probablement des options de lien

pour la méthode validate()

Sinon, lisez la suite.

Dans toute la documentation, deux termes sont utilisés très souvent, il est donc important que vous connaissiez leur signification dans le contexte du plugin de validation :

• méthode: Une méthode de validation implémente la logique pour valider un élément, comme une méthode d’e-mail qui vérifie le bon format de la valeur d’une entrée de texte. Un ensemble de méthodes standard est disponible et il est facile d’écrire les vôtres.
• règle : Une règle de validation associe un élément à une méthode de validation, comme « valider l’entrée avec le nom »primary-mail » avec les méthodes « required » et « email ».

méthodes de plugin de lien

Cette bibliothèque ajoute trois méthodes de plugin jQuery, le point d’entrée principal étant la méthode validate:

• validate()– – Valide le formulaire sélectionné.
• valid() – Vérifie si le formulaire sélectionné ou les éléments sélectionnés sont valides.
• rules()– – Lit, ajoute et supprime des règles pour un élément.

sélecteurs personnalisés de liens

Cette bibliothèque étend également jQuery avec trois sélecteurs personnalisés :

• :blank – Sélectionne tous les éléments avec une valeur vide.
• :filled– – Sélectionne tous les éléments avec une valeur remplie.
• :unchecked– – Sélectionne tous les éléments qui ne sont pas cochés.

validateur de lien

La méthode validate renvoie un objet Validator qui possède quelques méthodes publiques que vous pouvez utiliser pour déclencher la validation par programme ou modifier le contenu du formulaire. L’objet validator a plus de méthodes, mais seules celles documentées ici sont destinées à être utilisées.

• Validator.form()– – Valide le formulaire.
• Validator.element()– – Valide un seul élément.
• Validator.resetForm()– – Réinitialise le formulaire contrôlé.
• Validator.showErrors()– – Affiche les messages spécifiés.
• Validator.numberOfInvalids()– – Renvoie le nombre de champs non valides.
• Validator.destroy()– – Détruit cette instance de validateur.

Il existe quelques méthodes statiques sur l’objet validateur :

• jQuery.validator.addMethod() – Ajoute une méthode de validation personnalisée.
• jQuery.validator.format()– – Remplace les espaces réservés {n} par des arguments.
• jQuery.validator.setDefaults() – Modifie les paramètres par défaut pour la validation.
• jQuery.validator.addClassRules()– – Ajoute une méthode de classe composée.

Liste de liens des méthodes de validation intégrées

Un ensemble de méthodes de validation standard est fourni :

• required– – Rend l’élément requis.
• remote– – Demande une ressource pour vérifier la validité de l’élément.
• minlength – Fait que l’élément nécessite une longueur minimale donnée.
• maxlength– – Fait que l’élément nécessite une longueur maximale donnée.
• rangelength– – Fait que l’élément nécessite une plage de valeurs donnée.
• min– – Fait que l’élément nécessite un minimum donné.
• max– – Fait que l’élément nécessite un maximum donné.
• range – Fait que l’élément nécessite une plage de valeurs donnée.
• step– – Fait que l’élément nécessite une étape donnée.
• email – Rend l’élément nécessite un e–mail valide
• url – Rend l’élément nécessite une URL valide
• date – Rend l’élément nécessite une date.
• dateISO– – Fait que l’élément nécessite une date ISO.
• number– – Fait que l’élément nécessite un nombre décimal.
• digits– – Fait que l’élément ne nécessite que des chiffres.
• equalTo – Nécessite que l’élément soit le même qu’un autre

D’autres méthodes sont fournies en tant que modules complémentaires et sont actuellement incluses dans des méthodes supplémentaires.js dans le package de téléchargement. Tous ne sont pas documentés ici:

• accept – Permet à un téléchargement de fichier d’accepter uniquement les types mime spécifiés.
• creditcard – Fait que l’élément nécessite un numéro de carte de crédit.
• extension– – Fait que l’élément nécessite une certaine extension de fichier.
• phoneUS – Valider le numéro de téléphone américain valide.
• require_from_group – Garantit qu’un nombre donné de champs dans un groupe sont complets.

Vous pouvez trouver le code source de toutes les méthodes supplémentaires dans le référentiel GitHub.

Il est possible de redéfinir l’implémentation des règles intégrées en utilisant la propriété $.validator.methods

link Directives générales

La section Directives générales fournit une discussion détaillée de la conception et des idées derrière le plugin, expliquant pourquoi certaines choses sont telles qu’elles sont. Il couvre les fonctionnalités plus en détail que la documentation de l’API, qui explique brièvement les différentes méthodes et options disponibles.

Si vous avez décidé d’utiliser le plugin de validation dans votre application et que vous souhaitez mieux le connaître, il est recommandé de lire les directives.

liez des champs avec des noms complexes (crochets, points)

Lorsque vous avez un attribut name comme user, assurez-vous de mettre le nom entre guillemets. Plus de détails dans les Directives générales.

lier trop de récursivité

Un autre problème courant se produit avec ce code:

 $("#myform").validate({
 submitHandler: function(form) {
 // some other code
 // maybe disabling submit button
 // then:
 $(form).submit();
 }
 });

Cela entraîne une erreur de récursivité trop importante: $(form).submit() déclenche un autre cycle de validation, entraînant un autre appel à submitHandler, et le tour est joué, la récursivité. Remplacez cela par un formulaire.submit(), qui déclenche l’événement de soumission natif à la place et non la validation.

Donc le code correct semble légèrement différent:

 $("#myform").validate({
 submitHandler: function(form) {
 form.submit();
 }
 });

liez Le formulaire d’inscription Marketo

liez Le formulaire d’inscription Marketo, étape 2

Basé sur une ancienne version du marketo.com formulaire d’inscription. La validation personnalisée a été une fois remplacée par ce plugin. Merci à Glen Lipka de l’avoir contribué!

Caractéristiques notables de la démo:

• Affichage des messages personnalisés: Aucun message n’est affiché pour la méthode requise, uniquement pour les erreurs de frappe (comme un mauvais format d’e-mail); Un résumé est affiché en haut (« Vous avez manqué 12 champs. Ils ont été mis en évidence ci-dessous. »)
• Validation à distance du champ e-mail. Essayez d’entrer par exemple.
• Intégration avec le plugin masked-input, voir les champs Zip et Téléphone et le Numéro de carte de crédit à l’étape 2
• Une méthode personnalisée pour rendre l’adresse de facturation à l’étape 2 facultative lorsque « Identique à l’adresse de l’entreprise » est cochée
• Une méthode personnalisée pour vérifier le mot de passe: Vérifie que le mot de passe contient au moins un chiffre et un caractère et qu’il comporte au moins 6 caractères. Si l’utilisateur brouille le champ avec une valeur non valide, l’entrée est vidée et obtient à nouveau le focus.

liez Le formulaire d’inscription Se Souvenir du Lait

Le formulaire d’inscription de rememberthemilk.com (basé sur une ancienne version). La validation personnalisée a été remplacée à l’aide de ce plugin. Merci à RTM d’avoir contribué!

Caractéristiques notables de la démo:

• Affichage de message personnalisé, basé sur la disposition de table d’origine, en utilisant l’option de réussite pour afficher une coche pour les champs valides
• Validation à distance du nom d’utilisateur, pour vérifier s’il est déjà pris (essayez « Peter », « asdf » ou « George »)

liez un formulaire en plusieurs parties « acheter &vendre une maison »

Contribué par Michael Evangelista, affichage d’un formulaire en plusieurs parties pour l’achat et la vente de maisons.

Caractéristiques notables de la démo:

• Multipart, implémenté à l’aide de l’accordéon de l’interface utilisateur jQuery et d’une méthode personnalisée pour vérifier si un élément se trouve sur la page en cours lorsqu’il est validé
• Intégration avec le plugin d’entrée masquée, voir les champs Phone et Zip

lien à l’aide de la validation à distance pour aider avec s

Caractéristiques de la validation à distance pour aider l’utilisateur à remplir s.

Caractéristiques notables de la démo:

• Validation à distance pour vérifier si l’utilisateur entré le bon, sans le forcer à soumettre d’abord le formulaire