28
JUIL

Validity - Un plugin jQuery de validation de formulaires avancé

Publié le 28/07/10 à 10h23 par DJo

Validity est un plugin jQuery complet permettant d'ajouter de la validation sur les champs de vos formulaires du côté client.

Validity - Un plugin jQuery de validation de formulaires

Proposer de la validation côté client peut être intéressant pour vos visiteurs. Ils n'auront pas à attendre la validation serveur et le refresh des données pour se rendre compte qu'il manque des infos ou que certaines sont erronées.

Et ils ne seront pas frustrés d'avoir rempli un formulaire complet qui se réaffichera vide à cause d'une petite erreur (Bon sang, rechargez les données de vos formulaires s'il y'a des erreurs, il n'y'a rien de mieux pour perdre des inscriptions!).

Validity est un plugin simple à utiliser et complet.

Vous trouverez un grand nombre de validateurs prêts à emploi:

  • Champ requis
  • Champ doit correspondre à une regex
  • Champ validé par Ajax
  • Champ compris entre deux valeurs
  • Champ égal, inférieur ou supérieur à une valeur
  • Taille maximum ou minimum d'un champ
  • Etc.

Voici comment le mettre en place:

      <form method="get" action="simple.htm">
            Number of Vehicles:
            <input type="text" id="vehicles" name="vehicles" title="Vehicle Count" />
            <br /><br />
            Date of birth:
            <input type="text" id="dob" name="dob" title="Birthday" />
            <br /><br />
            <input type="submit" />
        </form>

Et côté javascript:

$("form").validity(function() {
    $("#vehicles")                      // The first input:    
        .require()                          // Required:
        .match("number")                    // In the format of a number:
        .range(4, 12);                      // Between 4 and 12 (inclusively):
    
    $("#dob")                           // The second input:
        .require()                          // Required:
        .match("date")                      // In the format of a date:
        .lessThanOrEqualTo(new Date());     // In the past (less than or equal to today):
});

Plusieurs exemples sont disponibles dans la documentation du plugin.

Les messages pourront bien sûr être personnalisés avec du CSS.

 

Site Officiel

Baraguiné par codegrabber le 28/07/10 à 10h58
codegrabber sur La Ferme du Web
plugin sympa au premier abord mais franchement inutilisable en l'état, toutes les regex sont us, il faut toutes les reprendre une par une pour adapter cela aux cas français, codes postaux, numéros de téléphone...
il faut aussi noter que cela devient complexe pour gérer différents formats pour le même truc, genre les codes postaux "75000" ou "F-75000".
En clair je crois que je vais rester sur ma lib de fonctions toute prête en js pur avec les regex qui vont bien, l'utilisation de ce plugin n'apporte pas grand chose.
Souvent l'ajout de plugin jquery n'est pas une bonne chose, le js pur est souvent beaucoup plus performant car plus simple et moins gourmand en chargement.
Baraguiné par le 28/07/10 à 11h55
Je ne connais pas, personnellement j'utilise : http://docs.jquery.com/Plugins/Validation

Qui fonctionne très bien :)
Baraguiné par prisme le 28/07/10 à 12h14
prisme via Twitter
même idée qu'Anael : il a quoi de plus que Jquery Validation ?
plus simple à utiliser ?
Baraguiné par prisme le 28/07/10 à 12h17
prisme via Twitter
@codegrabber : http://validity.thatscaptaintoyou.com/Demos/index.htm#LanguagePackages
et ça il faut aussi le faire avec Jquery Validation
Baraguiné par codegrabber le 28/07/10 à 15h08
codegrabber sur La Ferme du Web
@prisme > tout à fait, c'est pour cela que je ne l'utilise pas non plus :) non sans rire, pourquoi utilisez vous un plugin jquery pour juste faire un match d'une regex ??? Le plus complexe là dedans est de faire ses propres regex, faire un match cela n'a rien de compliqué, de fait j'ai du mal à comprendre qu'on utilise un plugin jquery nettement plus lourd et qui de toute façon va faire la même chose en alourdissant sévèrement la page. Je dois reconnaître que je suis tout à fait contre "tout faire en jquery" parce que "c'est plus simple" et "qu'il y'a un plugin pour cela", le but n'est il plus d'optimiser son code ? Quand on a une ligne à taper, pourquoi se compliquer la vie ?
et puis bon... 12K pour celui là en packé et 15K pour validation... hum quand tu vérifies un pauvre login ça fait mal au c*l quand même... Sans compter tout ce qu'il faut patcher pour l'étendre...
Bref pour moi ce n'est que temps perdu et perte de perfs, rien de mieux qu'une bête lib de fonctions maison en js pur. Enfin c'est mon avis hein :)
Baraguiné par jabberwock le 28/07/10 à 23h57
jabberwock sur La Ferme du Web
Je ne suis peut être pas un pro du JQuery (loin de là en fait) mais il est clair, que je ne comprends pas l'intérêt d'utiliser une librairie plus ou moins complexe pour faire de simple match pour valider des formulaires.

Tant qu'à perdre du temps pour passer en français une telle librairie, autant se créer sa propre librairie indépendante de JQuery que l'on pourra si besoin réutiliser sur d'autres projets.
Baraguiné par dutom007 le 29/07/10 à 11h02
dutom007 sur La Ferme du Web
Attention lors que le JS est désactivé ! Rien ne vaut une vérification php.
Baraguiné par le 29/07/10 à 17h31
@dutom007 > Oui, n'oublions pas que le JS ne doit pas être l'unique validation du formulaire mais doit être un outil d'ergonomie pour évider à l'internaute des aller-retours entre remplissage de formulaire et messages d'erreurs... c'est PHP qui doit remplir le rôle de validation.

@codegrabber > Moi j'aime faire du full jQuery... J'aime pas les getElementById().innerHTML. Pense-tu réellement que faire un $("#mon-div").html() Est plus lourd a exécuter ? =/

>>> je suis tout à fait contre "tout faire en jquery" parce que "c'est plus simple" et "qu'il y'a un plugin pour cela"

Et pense-tu au fait d'avoir un code homogène ? ... Ça deviens beaucoup plus facile à maintenir par la suite :)
Baraguiné par jabberwock le 30/07/10 à 07h54
jabberwock sur La Ferme du Web
@Anael Favre

Je pense que ce que veux dire codegrabber (il me corrigera si je me plante) ce n'est pas forcément de mettre du JS pur quand on a déjà du JQuery, mais plutôt de ne pas forcément ajouter une librairie de validation alors que tu n'as besoin que d'un match ou deux. Tu peux toujours utiliser la partie JQuery pour les sélections et les manipulations d'éléments.
Baraguiné par manuraynaud le 14/10/10 à 16h45
manuraynaud via Twitter
Ce plugin ne semble fonctionner qu'avec firefox (en tout cas chez moi il ne marche qu'avec firefox... ) je trouve ca louche
Baraguiné par manuraynaud le 14/10/10 à 16h49
manuraynaud via Twitter
je Corrige... la version minify ne fonctionne que sous firefox...

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web