Validation de formulaire sans rechargement de la page

Publié le 22 mai 2007 par leGizz dans Web & co

Cela faisait quelques temps que je cherchais un petit script pour contrôler mes formulaires avec un retour immédiat (sans rechargement de la page) en cas d’erreur. Eh bien je l’ai trouvé !

Il s’agît d’un script développé par Andrew Tetlaw qui est disponible à cette adresse : Really easy field validation. Il permet de valider un formulaire de façon simple et esthétique. La prise en main est très rapide, en quelques minutes vous serez capable de le mettre en place

Un exemple est préférable à de longues explications, vous pourrez donc tester cela lors de la saisie de commentaires sur mon blog.

Mais comment ça fonctionne ?

Tout d’abord il s’agît d’un script basé sur Prototype.js (la fameuse librairie Javascript / Ajax). Pour le faire fonctionner il suffit d’intégrer ces deux fichiers (prototype.js & validation.js) dans votre page HTML comme ci-dessous :

<script src="prototype.js" type="text/javascript"></script>
 <script src="validation.js" type="text/javascript"></script>

Ensuite, pour chaque champ du formulaire que vous souhaitez contrôler, écrivez votre code comme suit :

<input class="required" id="field1" name="field1" />

La validation se fera en fonction de la class CSS utilisée (c-a-d class="required"), il existe de nombreuses options permettant par exemple de tester les adresses email (validate-email), dates (validate-date-au), urls (validate-url), etc. …

Pour conclure il convient d’activer la validation sur l’ID de notre formulaire :

<script type="text/javascript">new Validation('form-id'); // OR new Validation(document.forms[0]);</script>

Les messages d’alertes sont entièrement personnalisables (texte et apparence). Pour plus d’information je vous conseille d’aller jeter un oeil au site de l’auteur.

Intégration du script dans dotclear 1.2.x (pour les commentaires)

Si comme moi vous avez un blog dotclear (1.2.x) et vous souhaitez utiliser ce script pour les commentaires, voici le code et les fichiers à insérer sur la page "form.php" de votre thème.
Un problème avec le script ? Contactez moi

N'hésitez pas à partager cet article !

Tags : formulaires

Commentaires

44 commentaires pour l'article “Validation de formulaire sans rechargement de la page”

tuf dit :

22 mai 2007 à 10 h 03 min

Pas mal du tout. C’est la classe.
Romain dit :

22 mai 2007 à 10 h 10 min

Eh ben, je crois que je suis le premier à l’essayer !
Je cherchais un moyen de faire la même chose, mais sur WordPress, et sans déployer des usines à gaz comme Scriptaculous.
Romain dit :

22 mai 2007 à 10 h 12 min

Ah, en fait j’étais pas le premier, et la page s’est quand même rechargée :/
weetabix dit :

22 mai 2007 à 11 h 33 min

ah ouais, super, et pour DC 2 ? çà marche ?
Samuel MARTIN dit :

22 mai 2007 à 13 h 25 min

Hum, pratique dans la mesure où l’effort du côté "webmaster" semble légze. Mais ce n’est pas nouveau, je me rappelle l’avoir fait il y a 2 ans (mais à la main en JS).
leGizz dit :

22 mai 2007 à 14 h 39 min

Romain : En fait ce modeste script permet uniquement de valider les champs du formulaire (pas d’erreur de saisie), l’envoi se fait tout de même avec rechargement. L’envoi de form viendra certainement prochainement

Weetabix : Malheureusement pour l’instant je n’ai pas encore regardé DC2. De plus à l’heure actuelle rien ne porte à croire que je l’utiliserai, désolé.

Samuel MARTIN : en effet ce genre de script n’est absolument pas nouveau, mes premiers essais DHTML JS datent de 2003 (lorsque je préparais ma licence). Le principal avantage de ce script est la simplicité. Il faut moins de 5 minutes pour le mettre en place, tandis qu’à développer c’est une autre affaire…
Tuf dit :

22 mai 2007 à 14 h 52 min

Pourquoi ne pas utiliser DC2 ? (réponse dans un billet si c’est long )
leGizz dit :

22 mai 2007 à 15 h 34 min

A vrai dire j’ai déjà un blog en test avec DC2, la philosophie pour le design des thèmes à tellement changée que je n’ai pas le courage de m’y attarder (en ce moment).
Pis je dois avouer que je suis de plus en plus séduit par WordPress…
Poète dit :

22 mai 2007 à 21 h 22 min

C’est pas mal comme idée, merci pour les liens et les explications faudra que je le tests aussi. Par contre je ne vois pas de changements ici ou alors je bug.
Jean Claude Attitude dit :

1 juin 2007 à 22 h 17 min

Je vais tester tout de suite, hop, les mains dans le code !
spami dit :

9 juin 2007 à 20 h 34 min

Et pour ceux qui ne lise pas les .rar :’(
vive le .zip
Las dit :

20 juin 2007 à 12 h 23 min

voyons ça…
Robotnyk dit :

25 juin 2007 à 18 h 55 min

Ah cool
kenny dit :

28 juin 2007 à 19 h 38 min

testestestestestestes
pipo dit :

13 juillet 2007 à 17 h 41 min

Test
benoit dit :

14 août 2007 à 10 h 51 min

super ce script,
seulement, comment faire pour le faire marcher sous IE ?!?
Car chez moi il ne marche que sous Firefox (Ton formulaire de commentaire également)…
veutester dit :

14 septembre 2007 à 23 h 00 min

tester ?
Intelect dit :

1 octobre 2007 à 4 h 46 min

Merci je vais tester
PourLesBesoins dit :

15 janvier 2008 à 23 h 50 min

test
PourLEsBesoin dit :

15 janvier 2008 à 23 h 52 min

Malheureusement je ne suis pas convaincu, il me semble bien que la page s’est rechargé au moment de l’enregistrement de mon commentaire.

Par contre je note de très bonnes fonctions de contrôle des champs, certainement plus propres et plus efficaces que les miennes.
leGizz dit :

16 janvier 2008 à 9 h 23 min

En fait l’article concerne le contrôle des champs.
hfddh dit :

27 juin 2008 à 18 h 05 min

dfhfdh dfhhdfhfh
docteurdem dit :

27 juin 2008 à 22 h 09 min

si dans mon formulaire de saisie, j’ai la date debut et la date fin .Comment j peux faire le controle avec prototype pour la date de debut <= date de fin???????
THx
h dit :

6 novembre 2008 à 2 h 05 min

sinon j’ai trouvé un autre script pour valider les données d’un formulaire.
http://www.mutationevent.com/pro...
Akuma dit :

6 novembre 2008 à 21 h 45 min

Génial ce script, et super rapide à mettre en place.
Merci beaucoup
sdfsdfsd dit :

19 novembre 2008 à 20 h 43 min

sdfsdfsdf sdf
le tenancier d'hotel de passe dit :

7 décembre 2008 à 20 h 01 min

obliger de tester
test dit :

4 février 2009 à 21 h 13 min

Obligé de tester également
Test dit :

24 février 2009 à 23 h 54 min

Hehehe
kazima dit :

29 mars 2009 à 19 h 51 min

pas mal je viens de découvrir
un aute trest dit :

16 avril 2009 à 14 h 32 min

Je test moi aussi
yakusa dit :

11 juillet 2009 à 18 h 44 min

cool
test dit :

23 juillet 2009 à 19 h 34 min

test
gidjome dit :

6 septembre 2009 à 22 h 22 min

De quoi a t-on besoin pour mettre le script en place
- legizz dit :
  
  8 septembre 2009 à 6 h 22 min
  
  Toutes les informations nécessaires se trouvent sur le site de l'auteur du script : http://tetlaw.id.au/view/javascript/really-easy-f…
sge dit :

22 décembre 2009 à 18 h 11 min

test
sssss dit :

27 janvier 2010 à 17 h 15 min

ssssss
rdyrzret dit :

5 mars 2010 à 16 h 46 min

très sympa
Sylv dit :

3 septembre 2010 à 17 h 22 min

Test
rob dit :

3 septembre 2010 à 17 h 24 min

ok
Kressly dit :

15 décembre 2010 à 19 h 19 min

Tout ça c’est bon et que faire de nous qui ne faisons pas du javascript ?
nono dit :

23 janvier 2011 à 4 h 00 min

test
auzoult dit :

17 février 2011 à 10 h 03 min

Merci je cherchais une astuce car je suis un bille en ajax, a voir …
Superbatros dit :

23 juin 2011 à 15 h 40 min

Über classe !
Typiquement ce que je recherchais pour (grandement) améliorer mon site !
Merci infiniment !