Openweb.eu.org

Bien valider ses formulaires avec Javascript

docteurflata — 2018-03-18T14:07:28Z

très bonne explication, j'ai facilement compris ce cours qui est d'une grande clarté.

Bien valider ses formulaires avec Javascript

Vetime — 2017-08-24T11:27:37Z

Bonjour, votre démonstration est très intéressante et bien documentée, le problème est qu'un formulaire ne comporte pas que le prénom, j'ai essayé d'ajouter le nom et la cela fonctionne pour le prénom mais cela ne fonctionne pas pour le nom
function valider()
// si la valeur du champ prenom est non vide
if(document.formSaisie.prenom.value != "")
// les données sont ok, on peut envoyer le formulaire
return true ;

else
// sinon on affiche un message
alert("Saisissez le prénom") ;
// et on indique de ne pas envoyer le formulaire
return false ;

if(document.formSaisie.nom.value != "")
// les données sont ok, on peut envoyer le formulaire
return true ;

else
// sinon on affiche un message
alert("Saisissez le nom") ;
// et on indique de ne pas envoyer le formulaire
return false ;

Pourriez nous indiquer que faire si il y a plusieurs champs
par avance merci

Cordialement
A.Vetime

Bien valider ses formulaires avec Javascript

Elodie — 2016-07-04T09:28:05Z

Excellent article

Bien valider ses formulaires avec Javascript

nesrine — 2014-05-14T17:24:26Z

je veut changer l'apparence des messages d'alerte pouvez vous m'aider voici le code
function verifClient()

var val3 =document.getElementById("val3").value ;
var forme2 = document.getElementById("forme2") ;

$.ajax(
url : "ajaxSupClinet.php",
type : "get",
data : "name=" + val3 ,

success : function(resultat)

if( $.trim(resultat) == "true" && confirm ('Voulez vous supprimer le client ?' ))

alert("Client supprimée") ;
forme2.submit() ;

else

alert("Client inexistant") ;
return false ;

) ;

Bien valider ses formulaires avec Javascript

andy — 2014-03-31T15:26:02Z

super explication, merci ! on ne peut pas être plus clair. enfin une aide en programmation bien expliquée !

Bien valider ses formulaires avec Javascript

nobody — 2013-09-11T12:24:26Z

Bonjour,

les méthodes indiquées ici sont idéales, (vérification côté serveur, et client, usage du onsubmit et du input submit) cependant, la réalité et l'évolution des techniques change quelque peu la donne.

A l'heure de l'Ajax, avec un usage intensif du JavaScript, et une standardisation des différentes implémentations, il devient de plus en plus rare de trouver des sites fonctionnant SANS JavaScript. En effet, le confort et les fonctionnalités que procure l'utilisation de XHR, font qu'il est parfois impossible de faire un site équivalent sans activation du JavaScript.

C'est malheureusement au dépend des personnes à besoins spécifiques comme avec les lecteurs Braille, ou audio. (bien que de nombreux systèmes le gèrent de nos jours également).

l'activation ou non du JavaScript est devenu un problème exceptionnel (ce que montre les différentes enquêtes...).

Quant au "input submit", c'est alors les graphistes des applications qui s'arrachent les cheveux par manque de standardisation de l'apparence de ces derniers qui peuvent vous ruiner une belle page.

Quant aux handicap visuels, c'est souvent plus du ressort d'une bonne présentation et d'une gestion propre du CSS que cela se trouve gérer.

J'encourage néanmoins l'utilisation autant que possible des bonnes pratiques ci-dessus énoncées, mais parfois il faut savoir faire quelques exceptions.

Bien valider ses formulaires avec Javascript

zeboudja — 2013-07-03T08:13:38Z

Merci pour cette clarté

Bien valider ses formulaires avec Javascript

Mohcine — 2013-06-19T14:22:59Z

Un très bon article,

Merci à vous tous

Bien valider ses formulaires avec Javascript

Webmaster — 2013-05-29T17:20:00Z

je veux savoir comment vérifier une adresse e-mail
un exemple svp
cordialement

Bien valider ses formulaires avec Javascript

Koffi — 2013-05-29T08:52:57Z

Très bon tuto. Je dirai tout simplement, Bravo !

Bien valider ses formulaires avec Javascript

Jiji — 2013-04-05T10:12:51Z

Très clair ; merci

Bien valider ses formulaires avec Javascript

Béryl — 2013-03-20T19:04:47Z

Oups !
Le message précédent est parti un peu vite.

A l'attention d'Emma (19 mars 17:30)

Une tentative pour vous donner le listing de la façon de faire que j'ai adoptée n'ayant pu aboutir du fait que toutes les accolades ne ressortaient pas, je vous propose de vous l'envoyer par mail si vous le souhaitez. Il s'agit en fait de répéter, dans un fichier que j'appelle verif.js, la formule suivante autant de fois qu'il y a de champs de formulaire à vérifier :

if (condition sur le champ) [accolade] alerte += "\n- Nom" ; n=n+1 ; test=false [accolade]

en ayant pris le soin d'initialiser alerte à "", n à 0, test à true. On termine en vérifiant la valeur de n :
- 0 : on sort sans alerte ;
- 1 : message d'erreur au singulier et liste des erreurs concaténées dans "alerte" ;
- 2 : comme ci-dessus pour 1, mais message d'erreur au pluriel. L'émission du message d'erreur consiste à écrire alert(alerte). On termine par un "return test" (sans les guillemets).

Pour être complet, on place la ligne suivante entre les balises et du fichier du formulaire :

Cordialement

Bien valider ses formulaires avec Javascript

2013-03-20T19:00:17Z

A l'attention d'Emma (19 mars 17:30)
Une tentative pour vous donner le listing de la façon de faire que j'ai adoptée n'ayant pu aboutir du fait que toutes les accolades ne ressortaient pas, je vous propose de vous l'envoyer par mail si vous le souhaitez.
Il s'agit en fait de répéter, dans un fichier que j'appelle verif.js, la formule suivante autant de fois qu'il y a de champs de formulaire à vérifier :

if (condition sur le champ)
[accolade] alerte += "\n- Nom" ; n=n+1 ; test=false [accolade]

en ayant pris le soin d'initialiser alerte à "", n à 0, test à true.
On termine en vérifiant la valeur de n :
– 0 : on sort sans alerte ;
– 1 : message d'erreur au singulier et liste des erreurs concaténées dans "alerte" ;
– 2 : comme ci-dessus pour 1, mais message d'erreur au pluriel.
L'émission du message d'erreur consiste à écrire alert(alerte).
On termine par un "return test" (sans les guillemets).

Pour être complet, on place la ligne suivante entre les balises

du fichier du formulaire :

Cordialement

Bien valider ses formulaires avec Javascript

Béryl — 2013-03-20T17:49:20Z

Tuto clair, précis et fouillé.
Les exemples sont simples et utilisables immédiatement.
Les mises en garde sont particulièrement pertinentes.

Bravo et merci à Laurent, son auteur, de nous guider aussi bien.

Bien valider ses formulaires avec Javascript

emma — 2013-03-19T16:30:23Z

bonjour

Merci pour votre tuto qui est super bien expliqué
j'aimerais savoir comment vous gérez la vérification de plusieurs champs ?
quelle est la meilleure méthode pour vous ?
Personnellement, j'ai fais des if imbriqués.

merci par avance pour votre avis

Bien valider ses formulaires avec Javascript

sami — 2013-03-19T09:49:21Z

c'est très bien

Bien valider ses formulaires avec Javascript

sarah — 2013-03-08T20:29:02Z

Hello, merci pour cet article. J'étais sur un tuto qui s'est révélé incomplet en fait ! grace à vous j'ai trouvé l'erreur. Thx.

Bien valider ses formulaires avec Javascript

rick des bois — 2013-02-19T10:41:56Z

Merci ce tuto clair et concis m'a beaucoup aidé dans mon apprentissage. ;)

Bien valider ses formulaires avec Javascript

Laurentj — 2012-11-21T08:19:46Z

@XcentY
>Le problème de son "onSubmit()" avec la validation par la touche Return
Il n'y a aucun problème avec la touche return ou tab : dans le script JS du onsubmit, qui est appelé quand on appuie sur Return ou que l'on clique sur le bouton de submit, à vous de vérifier le contenu du formulaire et de renvoyer true ou false (ou de faire un preventDefault() sur l'event sbmit), pour accepter ou non l'envoi du formulaire.

Bref, si le JS du onsubmit est correctement fait, le formulaire ne peut être envoyé au serveur si le contenu n'est pas valide.

Et de toute manière, il faut aussi COTE SERVEUR, toujours valider les données qui sont soumises, car le JS peut avoir buggé dans la page, ou que l'utilisateur a désactivé le JS dans son navigateur, ou encore que le formulaire est envoyé par un robot (cas des outils pour spammer).
Donc non, il n'y a aucun souci si le développeur fait une bonne vérification des données à la fois coté client (en js) et coté serveur (ce qui est le plus important).

Bien valider ses formulaires avec Javascript

XcentY — 2012-10-26T06:57:00Z

Je ne m'avancerai pas pour dire que telle ou telle manière choisie par un développeur est une erreur et que l'auteur est la bonne et unique manière de faire.
Le problème de son "onSubmit()" avec la validation par la touche Return est pour moi le plus gros soucis puisque des utilisateurs inexpérimentés valideraient le formulaire avant d'avoir rempli tous les champs. De plus, les gens qui utilisent le clavier, naviguent dans le formulaire avec la touche de tabulation et il n'y a rien qui empêche de valider le formulaire en tapant la touche Return quand la tabulation arrive sur le bouton.