Programmation web CSS HTML PHP Javascript RSS SQL SSH, serveur linux Outils
  PHPascal a 95 articles


Recherche

Modifier la couleur:

• Bleu
• Orange
• Mauve
• Noir
• Rouge
• Vert

Programmation web / Javascript / validation formulaire

Validation d'un formulaire de façon ergonomique en javascript

Pour simplifier l'utilisation d'un formulaire, on ce doit de bien indiqué quelles informations son obligatoire et que l'on doit remplir pour passer à l'étape suivante.

Exemple d'un formulaire :

Veillez remplir le formulaire
* Champ obligatoire

Compagnie *
Téléphone*
Courriel
Fax

Dans cette exemple le champ compagnie et téléphone sont requis afin de pouvoir envoyer le formulaire.

Un fichier externe javascript va nous permettre de s'assurer que les informations 'Compagnie' et 'Téléphone' sont remplie avant d'envoyer réellement le formulaire.

Si il y a un champ obligatoire vide et que l'on clique sur Envoyer, il va y avoir un message d'erreur afficher dans une boite pop-up Alert et la couleur du champ a remplir va ce mettre en rouge pour voir ou on a fait une erreur. (pour l'encadrement rouge des champs manquants on utilise une classe CSS)

Voici un exemple du message d'erreur:


Pour facilité l'envoie du courriel on ce doit en cas d'erreur de mentionner toutes les erreur qui figure dans le formulaire, pour que la personne puisse toutes les corrigés avant de renvoyer le formulaire.  Dans cette exemple si on avait mis seulement un message pour dire qu'on doit remplir le nom de la compagnie, par la suite on pourrais recevoir un message qui indique de remplir le numéro de téléphone.  C'est mieux d'avoir la liste de toutes les erreurs d'un coup sinon ça décourage beaucoup d'internaute à parvenir à envoyer le formulaire.

Voici le principe de validation pour être le plus ergonomique possible. Maintenant pour tout mettre en place voir l'article :

• Code source de validation du formulaire

Article écrit le 5 avril 2009
Article modifié le 21 avril 2009

Autres articles sous la même catégorie

• Trouver les valeurs des champs de formulaire avec Javascript
• Débuter avec JQuery avec des exemples
• Protection des courriels dans une page web en javascript
• Créé des entité html dynamiquement avec Javascript - createElement
• Formatage d'un nombre en javascript avec une fonction (12345 -> $12 345.00) - comme la fonction number_format de PHP
• Ajouter l'exécution d'une fonction javascript après le chargement de la page
• Code de validation d'un formulaire français et anglais, code source du fichier javascript.