TESTER UN FORMULAIRE EN JAVASCRIPT
stef1589
Messages postés
44
Date d'inscription
dimanche 19 mars 2006
Statut
Membre
Dernière intervention
27 mars 2008
-
6 oct. 2006 à 17:21
apoca62 Messages postés 2 Date d'inscription mardi 20 avril 2010 Statut Membre Dernière intervention 16 juin 2010 - 16 juin 2010 à 15:13
apoca62 Messages postés 2 Date d'inscription mardi 20 avril 2010 Statut Membre Dernière intervention 16 juin 2010 - 16 juin 2010 à 15:13
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/39812-tester-un-formulaire-en-javascript
https://codes-sources.commentcamarche.net/source/39812-tester-un-formulaire-en-javascript
16 juin 2010 à 15:13
cependant, pour ceux qui veulent utiliser les radio button, et les autres types où la varible "test" est utilisé à l'intérieu des cases, il est necessaire de supprimer le "if(test){ return false; }" ligne 116. en effet si on sort "normalement" d'un case la variable "test" vaut true.Et dont on rentre dans le if ligne 116...qui lui retourne false. alors que si la variable "test" reste à false on rentre directement dans les if situé dans les cases...et donc ça retourne false aussi.
Voila
Et attention, Tous les éléments du formulaire doivent avoir un name ;) (même les fieldset)
9 avril 2010 à 13:29
merci pour ce script, cependant j'ai un soucis avec les checkbox.
Mon code
2aaa
2bb
2cc
Tant que toutes ne sont pas cochées il me met un message d'erreur..
11 janv. 2009 à 12:10
Mais j'aimerai ajouter, pour éviter le spam et des robots, un champ où le visiteur doit inscrire un mot définit. S'il n'est pas inscrit juste que le formulaire ne soit pas envoyé. Comme avec la boîte de message de ton formulaire. J'ai bien entendu parler du captcha mais ça ne me convient pas.
Ce que je désire c'est le style "inscrivez quelle est la capitale de la France" et si le visiteur n'écrit pas "Paris" mais "Toulouse", ou n'importe quoi, le formulaire ne soit pas envoyé mais un message qui lui indique qu'il doit écrire Paris ou alors redirigé vers une page avec l'indication du bon mot demandé à inscrire dans le champ.
Comme quand on remplit un mail sans l'@ ou sans .com que le visiteur à un message l'email est invalide. Sauf que là je désire, en plus, un mot bien définit est rien d'autre inscrit à la place.
26 déc. 2008 à 15:27
1 - Maintenant, les champs radio et select sont bien contrôlés, mais si l'on utilise ces derniers, même individuellement, le formulaire ne peut pas être envoyé après contrôle... mais nul doute que Waldo va trouver la solution :) !
2 - Si l'on souhaite valider le formulaire à l'aide d'une action javascript : par exemple : "javascript:document.formulaire.submit()", comment peut-on intégrer la fonction "return checkForm(this)" afin d'envoyer le formulaire à partir de n'importe quel lien ?
Merci d'avance
19 déc. 2008 à 18:11
Helas, j'avais bien la dernière version...
Après tests, cela fonctionne correctement seulement si, les champs : text, textarea, checkbox, file et la fonction mail sont utilisés... par contre, ça merdouille si on utilise les champs : radio et select...
Oh, grand maître :) Aurais-tu la bonté de vérifier ton magnifique script afin qu'il remplisse entièrement sa tâche ?
NB : Même si quelques grammes de code indispose le script (sauf grosse bourde de ma part)... je note 10/10 car j'ai bien cherché sur le net et je n'ai pas trouvé de script aussi simple qui s'occupe aussi bien de tous les champs !
18 déc. 2008 à 10:01
ca fait un baille que je n'est pas utilisé cette fonction, regarde sur cette page :
http://mon-beulogue.com/tester-un-formulaire-en-javascript.html
Ca doit être la dernière version... :/
17 déc. 2008 à 22:33
En enlevant : onSubmit="return checkForm(this)", donc sans controle, mon formulaire fonctionne bien ? Dois y'avoir un problème de boucle, non ?
Si quelqu'un peu vérifier :)
18 juil. 2008 à 11:37
Par contre il ne teste pas les champs de type 'password' et ça m'a assez vite manqué...
Bon c'est un détail il suffit d'ajouter un ' case "password" '.
16 sept. 2007 à 15:23
mais ceci n'est pas un code pour débutant! et j'en suis un. (ou alors il existe une catégorie encore plus bas niveau que débutant..Lol)
pensez à nous quand vous postez :-)
12 sept. 2007 à 21:19
Merci d'avance
12 sept. 2007 à 13:07
11 sept. 2007 à 22:58
ca pourais donner ce genre de chose.
// on teste si l'objet de formulaire est une liste déroulante, dans ce cas l'objet est de type "select-one"
if(obj.elements[i].type == 'select-one'){
SelectEls = obj.elements[i];
var nbSelectItem = SelectEls.length;
var SelItemTest = false;
for(SelItem=0; SelItem < nbSelectItem; SelItem++){
// on teste chaque option de l'élément select
// dans ton cas on test aussi si la valeur sélectionné est différente de -1
if(SelectEls[SelItem].selected && SelectEls[SelItem].value != -1){
SelItemTest = true;
SelItem = nbSelectItem+1;
}
}
if(SelItemTest){
alert("c'est bon, une option est choisi");
}else{
alert("aucune option n'a été choisi");
}
}
en espérant que ca t'aide un peu.
++
11 sept. 2007 à 21:47
if(obj.elements[i].type == 'select' && obj.elements[i].options.selectedIndex.value == -1){
alert("vous n'avez pas de sélection : " + obj.elements[i].title);
Merci d'avance
12 janv. 2007 à 11:51
pour te répondre florian_x2 regarde du coté de la méthode onChange="".
Tu devrais avoir un truck du genre pour ton champs select.
<select name="unNom" id="unId" onchange="testValeurDefault(this)">
<option value="ValeurParDefaut">Valeur par default</option>
<option value="uneValeur_1">Valeur 1</option>
<option value="uneValeur_2">Valeur 2</option>
<option value="uneValeur_3">Valeur 3</option>
</select>
dans ton code javascript tu devrais avoir quelque chose comme ca.
function testValeurDefault(el){
//el corespond à ton objet sélect
if(el.value == 'ValeurParDefaut'){ // tu test si ton select est toujours à la valeur par defaut
alert('Veuillez choisir une valeur');
el.focus();
}
}
voila à peut près ce que tu devrais avoir.
Bon dev!
11 janv. 2007 à 16:51
Sinon c'est vrai que c'est un peu lour pour les utilisateurs lorsqu'il y a bcp de champs obligatoires, mais après tout les utilisateurs n'ont qu'à lire et remplir les champs comme il se doit.
J'ai qd même une petite question concernant les "select", comment faire pour obliger les gens à choisir une option autre que celle par défaut?
merci de votre aide
16 oct. 2006 à 12:17
Tu ne fais pas de message personnalisé, donc si tu t'attends a un numéro de téléphone, et que l'utilisateur donne son email, ton javascript ne sortira pas d'erreur. Par contre le serveur ne devra pas valider car la donnée saisie n'est pas correcte
=> JS aucune erreur
=> PHP/ASP erreur
-----------------
utilisateur perdu
Je ne trouve pas ca forcement pratique pour l'utilisateur.
Enfin sache que le taf d'un développeur c'est de facilité la vie des gens et de les accompagner dans leur actions donc "l'internaute doit savoir lire et point barre" ne s'applique pas ;)
Je ne suis pas d'accord avec toi, un développeur ne doit pas accompagner l'utilisateur dans ces actions (il peut le faire en supplément, l'ergonomie est un autre boulot).
Le développeur se doit de faire un programme qui fonctionne dans TOUS les cas de figures
16 oct. 2006 à 10:48
Mais rien ne t'empèche de faire autrement pour avertir l'utilisateur.
D'ailleur suite à ton commentaire j'ai viré les alert pour mettre des "div" qui apparaissent en douceur à côté de chaque champs erronés (merci AJAX).
Cependant tu na pas tors quand tu dis qu'il va faloir se repalucher des tests du côté serveur, mais ce javascript t'évite déjà d'avoir des champs vides, et donc de devoir re-charger le formulaire en affichant les erreurs trouvé. Ca évite une perte de temps pour l'utilisateur.
Enfin sache que le taf d'un développeur c'est de facilité la vie des gens et de les accompagner dans leur actions donc "l'internaute doit savoir lire et point barre" ne s'applique pas ;)
11 oct. 2006 à 15:28
C'est une aide à la vérification de formulaire (sympa pour l'internaute) mais la vérif tu es obligé de la faire avec un langage serveur (PHP, ASP, ...) donc tu te paluches 2 fois les tests.
Perso, je fais une fois le test en langage coté serveur et basta (l'internaute doit savoir lire et point barre).
En tout cas, c'est un bon exemple de la puissance de JS même si je ne m'en serai jamais servi comme ca
Par contre, je trouve que niveau ergonomie ton système n'est pas top, l'utilisateur va devoir corriger ces erreurs une par une alors que tu pourrais lui retourné un seul est unique message d'erreur ( les contenants toutes) et lui mettre le focus sur le premier
10 oct. 2006 à 13:02
kiki2sirom je vais te rassurer!
Ce code se base sur l'élément "title" des balises "input". C'est à dire, si tu mets un élément Title dans ton input, tu rends ce champ obligatoire, dans le cas contraire ton champ est libre.
Si tu veux savoir pourquoi je me base sur l'élément Title, c'est pour les utiliser lors de l'affichage de l'alert et indiquer à l'utilisateur le champ qu'il a omis.
younes371 :
Je fais l'appel de la fonction lors de l'envoie du formulaire, donc ton entête de formulaire aura à peu près cette forme:
<form name="toto" action="xxxxx.php" method="post" onsubmit="return checkForm(this)" >
c'est le on submit qui fait l'appelle à la fonction, et on met un "return" devant, car si ton formulaire n'est pas complet la fonction renvoie faux.
Donc dans ce cas la le onsubmit est faux donc le formulaire n'est pas envoyé.
Si vous avez d'autre question, ne pas hésiter à les poser
9 oct. 2006 à 15:28
Dans la plupart des formulaires, il y a certains champs qui sont obligatoires, et d'autres non !! dans ce cas là ce code ne fonctionnera pas : un exemple de saisie de coordonnées, on ne va pas obliger une personne à saisir son n° de tél ou de portable ou autre chose, s'il veut il le fait...
J'aurai plus vu un truc du genre : tous les noms de champs obligatoires commencent par "check_" ou quelque chose du même genre...
ça deviendra plus "portable" comme code. on rajoute, on enlève facilement un champs de formulaire
kiki
6 oct. 2006 à 23:37
et je te demande si tu pe mettre un fichier .htm complet, avec des champs?, pour savoir ou tu fais appel à tes fonctions.
6 oct. 2006 à 17:21