Bien valider ses formulaires avec Javascript - commentaires Bien valider ses formulaires avec Javascript 2018-03-18T14:07:28Z https://openweb.eu.org/articles/validation_formulaire#comment2956 2018-03-18T14:07:28Z <p>très bonne explication, j'ai facilement compris ce cours qui est d'une grande clarté.</p> Bien valider ses formulaires avec Javascript 2017-08-24T11:27:37Z https://openweb.eu.org/articles/validation_formulaire#comment2921 2017-08-24T11:27:37Z <p>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<br class="autobr" /> function valider()<i><br class="autobr" /> // si la valeur du champ prenom est non vide<br class="autobr" /> if(document.formSaisie.prenom.value != "") <i><br class="autobr" /> // les données sont ok, on peut envoyer le formulaire <br class="autobr" /> return true ;<br class="autobr" /> </i><br class="autobr" /> else <i><br class="autobr" /> // sinon on affiche un message<br class="autobr" /> alert("Saisissez le prénom") ;<br class="autobr" /> // et on indique de ne pas envoyer le formulaire<br class="autobr" /> return false ;<br class="autobr" /> </i></i></p> <p> if(document.formSaisie.nom.value != "") <i><br class="autobr" /> // les données sont ok, on peut envoyer le formulaire <br class="autobr" /> return true ;<br class="autobr" /> </i><br class="autobr" /> else <i><br class="autobr" /> // sinon on affiche un message<br class="autobr" /> alert("Saisissez le nom") ;<br class="autobr" /> // et on indique de ne pas envoyer le formulaire<br class="autobr" /> return false ;<br class="autobr" /> </i><br class="autobr" /> Pourriez nous indiquer que faire si il y a plusieurs champs<br class="autobr" /> par avance merci</p> <p>Cordialement<br class="autobr" /> A.Vetime</p> Bien valider ses formulaires avec Javascript 2016-07-04T09:28:05Z https://openweb.eu.org/articles/validation_formulaire#comment2828 2016-07-04T09:28:05Z <p>Excellent article</p> Bien valider ses formulaires avec Javascript 2014-05-14T17:24:26Z https://openweb.eu.org/articles/validation_formulaire#comment2396 2014-05-14T17:24:26Z <p>je veut changer l'apparence des messages d'alerte pouvez vous m'aider voici le code <br class="autobr" /> function verifClient() <i></i></p> <p> var val3 =document.getElementById("val3").value ;<br class="autobr" /> var forme2 = document.getElementById("forme2") ;</p> <p> $.ajax(<i><br class="autobr" /> url : "ajaxSupClinet.php",<br class="autobr" /> type : "get",<br class="autobr" /> data : "name=" + val3 ,</i></p> <p> success : function(resultat) <i></i></p> <p> if( $.trim(resultat) == "true" && confirm ('Voulez vous supprimer le client ?' )) <i></i></p> <p> alert("Client supprimée") ;<br class="autobr" /> forme2.submit() ;</p> <p> </p> <p> else <i></i></p> <p> alert("Client inexistant") ;<br class="autobr" /> return false ;</p> <p> <br class="autobr" /> ) ;</p> <p> <br class="autobr" /> <input type="button" value="supprimer" /></p> Bien valider ses formulaires avec Javascript 2014-03-31T15:26:02Z https://openweb.eu.org/articles/validation_formulaire#comment2248 2014-03-31T15:26:02Z <p>super explication, merci ! on ne peut pas être plus clair. enfin une aide en programmation bien expliquée !</p> Bien valider ses formulaires avec Javascript 2013-09-11T12:24:26Z https://openweb.eu.org/articles/validation_formulaire#comment1958 2013-09-11T12:24:26Z <p>Bonjour,</p> <p>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.</p> <p>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.</p> <p>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).</p> <p>l'activation ou non du JavaScript est devenu un problème exceptionnel (ce que montre les différentes enquêtes...).</p> <p>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.</p> <p>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.</p> <p>J'encourage néanmoins l'utilisation autant que possible des bonnes pratiques ci-dessus énoncées, mais parfois il faut savoir faire quelques exceptions.</p> Bien valider ses formulaires avec Javascript 2013-07-03T08:13:38Z https://openweb.eu.org/articles/validation_formulaire#comment1883 2013-07-03T08:13:38Z <p>Merci pour cette clarté</p> Bien valider ses formulaires avec Javascript 2013-06-19T14:22:59Z https://openweb.eu.org/articles/validation_formulaire#comment1853 2013-06-19T14:22:59Z <p>Un très bon article,</p> <p>Merci à vous tous</p> Bien valider ses formulaires avec Javascript 2013-05-29T17:20:00Z https://openweb.eu.org/articles/validation_formulaire#comment1658 2013-05-29T17:20:00Z <p>je veux savoir comment vérifier une adresse e-mail<br class="autobr" /> un exemple svp<br class="autobr" /> cordialement</p> Bien valider ses formulaires avec Javascript 2013-05-29T08:52:57Z https://openweb.eu.org/articles/validation_formulaire#comment1657 2013-05-29T08:52:57Z <p>Très bon tuto. Je dirai tout simplement, Bravo !</p> Bien valider ses formulaires avec Javascript 2013-04-05T10:12:51Z https://openweb.eu.org/articles/validation_formulaire#comment1571 2013-04-05T10:12:51Z <p>Très clair ; merci</p> Bien valider ses formulaires avec Javascript 2013-03-20T19:04:47Z https://openweb.eu.org/articles/validation_formulaire#comment1518 2013-03-20T19:04:47Z <p>Oups !<br class="autobr" /> Le message précédent est parti un peu vite.</p> <p>A l'attention d'Emma (19 mars 17:30)</p> <p>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 :</p> <p> if (condition sur le champ) [accolade] alerte += "\n- Nom" ; n=n+1 ; test=false [accolade]</p> <p> en ayant pris le soin d'initialiser alerte à "", n à 0, test à true. On termine en vérifiant la valeur de n :<br class="autobr" /> - 0 : on sort sans alerte ;<br class="autobr" /> - 1 : message d'erreur au singulier et liste des erreurs concaténées dans "alerte" ;<br class="autobr" /> - 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).</p> <p> Pour être complet, on place la ligne suivante entre les balises et du fichier du formulaire :</p> <code class="echappe-js"><script type="text/javascript" src="verif.js"></script></code> <p> Cordialement</p> Bien valider ses formulaires avec Javascript 2013-03-20T19:00:17Z https://openweb.eu.org/articles/validation_formulaire#comment1517 2013-03-20T19:00:17Z <p>A l'attention d'Emma (19 mars 17:30)<br class="autobr" /> 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.<br class="autobr" /> 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 :</p> <p>if (condition sur le champ)<br class="autobr" /> [accolade] alerte += "\n- Nom" ; n=n+1 ; test=false [accolade]</p> <p>en ayant pris le soin d'initialiser alerte à "", n à 0, test à true.<br class="autobr" /> On termine en vérifiant la valeur de n : <br /><img src='https://openweb.eu.org/squelettes-dist/puce.gif' width="8" height="11" class="puce" alt="-" /> 0 : on sort sans alerte ; <br /><img src='https://openweb.eu.org/squelettes-dist/puce.gif' width="8" height="11" class="puce" alt="-" /> 1 : message d'erreur au singulier et liste des erreurs concaténées dans "alerte" ; <br /><img src='https://openweb.eu.org/squelettes-dist/puce.gif' width="8" height="11" class="puce" alt="-" /> 2 : comme ci-dessus pour 1, mais message d'erreur au pluriel.<br class="autobr" /> L'émission du message d'erreur consiste à écrire alert(alerte).<br class="autobr" /> On termine par un "return test" (sans les guillemets).</p> <p>Pour être complet, on place la ligne suivante entre les balises</p> et <p>du fichier du formulaire :</p> <code class="echappe-js"><script type="text/javascript" src="verif.js"></script></code> <p>Cordialement</p> Bien valider ses formulaires avec Javascript 2013-03-20T17:49:20Z https://openweb.eu.org/articles/validation_formulaire#comment1516 2013-03-20T17:49:20Z <p>Tuto clair, précis et fouillé.<br class="autobr" /> Les exemples sont simples et utilisables immédiatement.<br class="autobr" /> Les mises en garde sont particulièrement pertinentes.</p> <p>Bravo et merci à Laurent, son auteur, de nous guider aussi bien.</p> Bien valider ses formulaires avec Javascript 2013-03-19T16:30:23Z https://openweb.eu.org/articles/validation_formulaire#comment1510 2013-03-19T16:30:23Z <p>bonjour</p> <p>Merci pour votre tuto qui est super bien expliqué<br class="autobr" /> j'aimerais savoir comment vous gérez la vérification de plusieurs champs ?<br class="autobr" /> quelle est la meilleure méthode pour vous ?<br class="autobr" /> Personnellement, j'ai fais des if imbriqués.</p> <p>merci par avance pour votre avis</p> Bien valider ses formulaires avec Javascript 2013-03-19T09:49:21Z https://openweb.eu.org/articles/validation_formulaire#comment1502 2013-03-19T09:49:21Z <p>c'est très bien</p> Bien valider ses formulaires avec Javascript 2013-03-08T20:29:02Z https://openweb.eu.org/articles/validation_formulaire#comment1488 2013-03-08T20:29:02Z <p>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.</p> Bien valider ses formulaires avec Javascript 2013-02-19T10:41:56Z https://openweb.eu.org/articles/validation_formulaire#comment1468 2013-02-19T10:41:56Z <p>Merci ce tuto clair et concis m'a beaucoup aidé dans mon apprentissage. ;)</p> Bien valider ses formulaires avec Javascript 2012-11-21T08:19:46Z https://openweb.eu.org/articles/validation_formulaire#comment1219 2012-11-21T08:19:46Z <p>@XcentY<br class="autobr" /> >Le problème de son "onSubmit()" avec la validation par la touche Return<br class="autobr" /> 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.</p> <p>Bref, si le JS du onsubmit est correctement fait, le formulaire ne peut être envoyé au serveur si le contenu n'est pas valide.</p> <p>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).<br class="autobr" /> 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).</p> Bien valider ses formulaires avec Javascript 2012-10-26T06:57:00Z https://openweb.eu.org/articles/validation_formulaire#comment1065 2012-10-26T06:57:00Z <p>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. <br class="autobr" /> 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.</p> Bien valider ses formulaires avec Javascript 2012-09-23T15:45:53Z https://openweb.eu.org/articles/validation_formulaire#comment989 2012-09-23T15:45:53Z <p>Merci beaucoup pour ces explications qui m'ont beaucoup éclairé.</p> Bien valider ses formulaires avec Javascript 2012-02-24T21:22:08Z https://openweb.eu.org/articles/validation_formulaire#comment623 2012-02-24T21:22:08Z <p>Merci pour ce très bon article :)</p> Bien valider ses formulaires avec Javascript 2012-02-09T13:26:16Z https://openweb.eu.org/articles/validation_formulaire#comment613 2012-02-09T13:26:16Z <p>Salut,<br class="autobr" /> Je veux remercier mon ami Google qui m'a emmené de la Tunisie jusqu'ici sur cette page.</p> <p>Merci pour à Laurent Jouanneau de cet article clair et complet qui reste encore une référence malgrès le passage de presque 8 ans déjà.</p> <p>Toutefois, j'espère trouver une aussi complète explication sur la meilleure validation coté serveur en PHP.</p> <p>Encore merci..</p> Bien valider ses formulaires avec Javascript 2011-09-21T07:44:05Z https://openweb.eu.org/articles/validation_formulaire#comment532 2011-09-21T07:44:05Z <p>Parfaite et concis, cette explication expose bien les erreurs à ne pas commettre ! Moi même en BTS informatique de Gestion 2ème année, ce rappel ne peut faire que du bien ! Merci !</p> Bien valider ses formulaires avec Javascript 2011-08-24T11:36:29Z https://openweb.eu.org/articles/validation_formulaire#comment520 2011-08-24T11:36:29Z <p>Enfin des réponses à mes questions.</p> <p>Merci</p> Bien valider ses formulaires avec Javascript 2011-06-08T20:09:56Z https://openweb.eu.org/articles/validation_formulaire#comment470 2011-06-08T20:09:56Z <p>merciiiiiii bcp pour cet article</p> Bien valider ses formulaires avec Javascript 2011-06-01T10:17:02Z https://openweb.eu.org/articles/validation_formulaire#comment466 2011-06-01T10:17:02Z <p>tres bonne expliquation :)<br class="autobr" /> merci</p> Bien valider ses formulaires avec Javascript 2011-06-01T09:38:25Z https://openweb.eu.org/articles/validation_formulaire#comment465 2011-06-01T09:38:25Z <p>waaaaaaaaaw je peux rien dire :)</p> Bien valider ses formulaires avec Javascript 2011-05-31T10:39:44Z https://openweb.eu.org/articles/validation_formulaire#comment464 2011-05-31T10:39:44Z <p>Super !<br class="autobr" /> Merci ! enfin un article clair, simple et précis, bravo !</p> Bien valider ses formulaires avec Javascript 2011-05-26T07:13:33Z https://openweb.eu.org/articles/validation_formulaire#comment463 2011-05-26T07:13:33Z <p>Cool les explications... merci ! Je passais par hasard et voilà que je tobe sur ce bonheur ! J'ai vrament apprecié ce mini tuto-conseil</p> Bien valider ses formulaires avec Javascript 2011-02-04T09:29:59Z https://openweb.eu.org/articles/validation_formulaire#comment402 2011-02-04T09:29:59Z <p>Pas avec le XHR !!!!<br class="autobr" /> Si ton but est d'éviter de recharger les pages, tu utilises Ajax, donc tu peux faire des submit sans recharcger la page. C'est le but !</p> Bien valider ses formulaires avec Javascript 2011-01-28T02:42:13Z https://openweb.eu.org/articles/validation_formulaire#comment397 2011-01-28T02:42:13Z <p>"La plupart des statistiques rapportent que c'est le cas pour 5 à 7% des internautes."<br class="autobr" /> Aujourd'hui, en 2011, ce taux est inférieur à 2%<br class="autobr" /> Un article où des tests on été effectués sur les visiteurs de Yahoo :<a href="http://dev.neowebmag.com/javascript-ajax/combien-de-visiteurs-desactivent-javascript" class="spip_url spip_out auto" rel="nofollow external">http://dev.neowebmag.com/javascript-ajax/combien-de-visiteurs-desactivent-javascript</a></p> <p>Le taux moyen de JavaScript désactivé oscille autour de 1,3% des visiteurs réels (1,46% pour la France), avec pour taux le plus élevé près 2% aux États-Unis et le plus bas autour de 0,25% au Brésil.</p> <p>Des témoignages pour de plus petits sites, donnent des résultats toujours inférieurs à 1%.</p> Bien valider ses formulaires avec Javascript 2011-01-28T02:41:26Z https://openweb.eu.org/articles/validation_formulaire#comment396 2011-01-28T02:41:26Z <p>"La plupart des statistiques rapportent que c'est le cas pour 5 à 7% des internautes."<br class="autobr" /> Aujourd'hui, en 2011, ce taux est inférieur à 2%<br class="autobr" /> Un article où des tests on été effectués sur les visiteurs de Yahoo :<a href="http://dev.neowebmag.com/javascript-ajax/combien-de-visiteurs-desactivent-javascript" class="spip_url spip_out auto" rel="nofollow external">http://dev.neowebmag.com/javascript-ajax/combien-de-visiteurs-desactivent-javascript</a></p> <p>Le taux moyen de JavaScript désactivé oscille autour de 1,3% des visiteurs réels (1,46% pour la France), avec pour taux le plus élevé près 2% aux États-Unis et le plus bas autour de 0,25% au Brésil.</p> <p>Des témoignages pour de plus petits sites, donnent des résultats toujours inférieurs à 1%.</p> Bien valider ses formulaires avec Javascript 2011-01-14T09:03:21Z https://openweb.eu.org/articles/validation_formulaire#comment378 2011-01-14T09:03:21Z <p>Superbe documentation ! Si tous les tutos pouvaient être de cette qualité...!</p> <p>Merci Laurent !</p> Bien valider ses formulaires avec Javascript 2010-11-20T15:47:22Z https://openweb.eu.org/articles/validation_formulaire#comment352 2010-11-20T15:47:22Z <p>très bonne explications !<br class="autobr" /> Le seul problème avec submit est qu'on est obligé de recharger de page ce que l'on voudrait parfois pas vraiment avec javascript...</p> Bien valider ses formulaires avec Javascript 2010-07-29T07:57:41Z https://openweb.eu.org/articles/validation_formulaire#comment277 2010-07-29T07:57:41Z <p>Un article clair et precis. !<br class="autobr" /> Javascript reste néanmoins pour moi un sous-langage a ne pas mettre entre toutes les mains de bidouilleurs ou plutôt scriptouilleurs. (ss langage car pas assez de sécurité, pas de typage, trop de variante, lié aux navigateurs et j'en passe)</p>