jQuery validation formulaire

tb-formjQueryVoici un exemple concret de de ajax à l’aide du framework . Il est très complet avec un version française.


jquery-form-validation
Cette version est CSS valide, elle contient aussi des expressions régulières facilement modifiable de contrôle d’email, de formatage de date, etc.

Avec des messages d’erreurs sous formes de tooltips (info-bulles) en semi-transparence du plus bel effet.

jquery-form-validation2

Merci à Cédric Dugas pour sa classe de validation jQuery

A découvrir sur www.position-absolute.com

Ma démo française dispo sur cette page formValidator

VF à télécharger formValidator-fr.rar

Testé sur :
Internet Exploder 6 & 7
Firefox 3+
Safari 4
Chrome 1+

Form Validation Engine 1.6.4

MAJ avec jQuery 1.4.2

Télécharger Démo

A voir aussi

  • fred

    Bonjour,

    Cette script est cette traduction sont impeccables.
    Seul hic, impossible de faire cohabiter un effet toogle de jQuery dans la balise form.

    Aprés pas mal de recherche, je n’ai rien trouvé qui explique cette non compatibilité. Le javascript n’étant pas mon fort, je me vois de trouver une autre méthode, à moins que quelqu’un ai une idée.

    La gestion de contrôle automatique de l’existence ou non déjà dans la base du pseudo me plaisait particulièrement …

    ;-)

  • zzs

    j’ai l’impression que lorsqu’on utilise plusieurs formulaire avec cette validation dans une même page, la soumission de n’importe quel formulaire, entraine la soumission des autres…

  • http://none daminux

    UP2DATE la dernière version !

  • Tchat

    Super tutoriel.. Je viens de le mettre en place!

  • Thomas

    Super, je viens de mettre ça en place et c’est vraiment pratique

    J’ai juste modifié quelques expressions régulières, au niveau du mail notament ( test@test fonctionnait, sans .com , .fr ou autre ) ainsi que le numero de tel pour avoir un format 00-00-00-00-00 et la date pour avoir dd-mm-yyyy

  • Olive

    Yes, merci pour la clarté des explications . Je vais sans doute pouvoir utiliser ce formulaire. C’est ce que j’ai trouvé de mieux avec mes quelques recherches sur google. J’imagine que il y a du boulot, il va m’en falloir aussi un peu pour réexploiter les sources à ma sauce ..

    C’est clair, simple et précis, merci :-) .
    Merci beaucoup

  • Thomas

    J’ai testé un peu ce plugin, vraiment sympa, simple, esthétique et tout et tout. Un hic cependant… J’ai testé le plugin avec deux formulaire sur une même page, qui pointent biensûr vers deux scripts différents ^^ le problème c’est qu’il n’y a qu’une seule instance du plugin pour la page donc l’appel aux scripts sont en conflit, généralement c’est celui déclaré en dernier qui passe …. Si quelqu’un a déjà résolu le problème je suis preneur !
    Sinon merci d’avoir partagé ce plugin, un régal ;)

  • nico

    Bonjour.
    J’essaie de mettre en œuvre la dernière version disponible (2.0 beta), plus particulièrement l’ajax pour la recherche de disponibilité de pseudo / email.
    Je me suis bien référé à la documentation en retournant de mon script PHP
    echo ‘{« jsonValidateReturn »:’.json_encode($arrayToJs).’}';

    Or, le message affiché sur le champs de saisie reste toujours celui d’attente.

    Quelqu’un aurait un exemple fonctionnel de ce type de vérification ?

    Merci.

  • Thomas

    @nico : J’ai eu moulte soucis pour mettre en oeuvre la dernière version aussi. Le fait est (si cela n’a pas été corrigé par l’auteur) que le script js télécharger n’est pas bon. Personnellement j’ai copier/coller celui utiliser dans la démo en ligne et ça marche impeccable. En espérant que cela puisse aider ;)

  • nico

    @Thomas : tu as téléchargé le js utilisé dans la démo en ligne ?

  • nico

    @Thomas : si tu peux me transmettre un de tes exemples qui fonctionne, ce serait sympa de ta part… :)

  • Thierry

    Merci pour ce super module, il fonctionne et s’adapte parfaitement!
    Est il possible de donner une autre direction à la flèche de la bulle d’avertissement?
    Elle pointe vers le haut mais j’aimerai la faire pointer vers la droite (je sais déplacer la bulle avec des margin mais le triangle représentant la flèche reste fixe.)

  • Trashump

    Bonjour, très bon script par contre dans l’adaptation que vous en avez faites je crois qu’il y a un problème. Les checkboxs, l’attribut « minCheckbox[2] » ne fonctionne pas ? Je souhaite vérifier qu’au moins un checkbox a bien était séléctionné.
    Sur la version http://www.position-relative.net/creation/formValidator/demos/demoCheckBox.html, tout fonctionne
    mais pas sur la version francaise.
    Es-ce moi ?

  • Matthieu

    Bonjour,
    j’ai réussi à intégrer ce script à mon site malgré un conflit avec un autre script js.
    par contre je ne vois pas du tout comment faire pour que le formulaire soit envoyé à une adresse mail ?
    je ne vois pas où intégrer çà ?
    je débute, je suis désolé çà doit sans doute être tout simple.
    merci de votre aide

  • http://www.pierrefay.fr Pierre FAY

    Pour la validation de formulaire perso je prefere jQuery Validate, je trouve ca plus propre et beaucoup plus puissant. J’ai fais un tutoriel a ce sujet :

    http://www.pierrefay.fr/jquery-validate-formulaire-validation-tutoriel-455

  • http://www.webcssdesign.com fred

    très intéressant je vais regarder cela, merci

  • Rafy79

    Bonjour,

    Je souhaiterai utiliser cette methode de validation de formulaire mais je n’arrive pas a le faire fonctionner avec des case a cocher comment puis je m’y prendre la syntaxe utiliser ne fonctionne pas merci pour votre réponse

  • Audrey

    Gros pb lors du redimensionnement de la page, ou dans mon cas un scroll sur la page, les info bulles ne suivent pas !! Suis-je la seule à rencontrer ce pb ?

  • http://www.valls.be vallsymachinant

    Je confirme Audrey, j’ai le même soucis après test, je n’ai pas analysé le code mais cela doit être à cause du positionnement CSS des divs de messages d’erreurs ?

  • Memelo

    Bonjour
    Le script pour contrôler le nombre de case à cocher ne marche pas quand le nom des checkbox comporte des crochets… (trés utile pour les traitements php).
    Comment puis-je contourner le problème ???

    merci

  • Memelo

    Si ça peut aider quelqu’un j’ai trouvé la solution à mon problème…
    Pour pouvoir intervenir sur une liste de checkbox généré en php et dont le nom comporte des crochets, il faut remplacer à la ligne 149 (environ), dans le fichier JQuery.validationEngine.js, la ligne :
    var callerName = $(caller).attr(« name »);
    par
    var callerName = « ‘ »+$(caller).attr(« name »)+ »‘ »;

    Cela rajoute des guillemets autour du caller et permet de lire les crochets !
    Bons Dev !

  • sangria

    Est-ce que quelqu’un à trouvé le solution lorsqu’on a plusieurs formulaires sur la même page ?

Réseau

Sites