stef1589
Messages postés44Date d'inscriptiondimanche 19 mars 2006StatutMembreDernière intervention27 mars 2008
-
6 oct. 2006 à 17:21
apoca62
Messages postés2Date d'inscriptionmardi 20 avril 2010StatutMembreDernière intervention16 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.
apoca62
Messages postés2Date d'inscriptionmardi 20 avril 2010StatutMembreDernière intervention16 juin 2010 16 juin 2010 à 15:13
Bon script car facil à comprendre ;)
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)
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..
ouebe
Messages postés6Date d'inscriptionjeudi 15 novembre 2007StatutMembreDernière intervention15 février 2013 11 janv. 2009 à 12:10
Merci et bravo, le formulaire est vraiment complet.
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.
webmcmaster
Messages postés15Date d'inscriptionsamedi 25 février 2006StatutMembreDernière intervention28 décembre 2008 26 déc. 2008 à 15:27
Désolé, c'est encore me... pour 2 raisons :
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
webmcmaster
Messages postés15Date d'inscriptionsamedi 25 février 2006StatutMembreDernière intervention28 décembre 2008 19 déc. 2008 à 18:11
Merci bien WALDO...
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 !
cs_Waldo2188
Messages postés142Date d'inscriptionjeudi 12 février 2004StatutMembreDernière intervention20 mai 2008 18 déc. 2008 à 10:01
webmcmaster
Messages postés15Date d'inscriptionsamedi 25 février 2006StatutMembreDernière intervention28 décembre 2008 17 déc. 2008 à 22:33
Très bonne base permettant de controler simplement presque tous les champs d'un formulaire... Sauf que, le formulaire ne peut pas être envoyé après le controle ?
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 :)
lechatfoin
Messages postés9Date d'inscriptionvendredi 18 juillet 2008StatutMembreDernière intervention 4 juin 2009 18 juil. 2008 à 11:37
Merci beaucoup j'ai gagné pas mal de temps !
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" '.
webandyou
Messages postés2Date d'inscriptiondimanche 16 septembre 2007StatutMembreDernière intervention16 septembre 2007 16 sept. 2007 à 15:23
merci pour le code et les commentaires...
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 :-)
clam13
Messages postés3Date d'inscriptionjeudi 25 novembre 2004StatutMembreDernière intervention12 septembre 2007 12 sept. 2007 à 21:19
Salut, j'ai juste un petit problème avec ton script, avec une adresse email valide, il me dit qu'elle est invalide. J'ai pourtant bien ajouté title="email" comme dans le script.
Merci d'avance
clam13
Messages postés3Date d'inscriptionjeudi 25 novembre 2004StatutMembreDernière intervention12 septembre 2007 12 sept. 2007 à 13:07
MERCI++ pour ton aide, ça marche nickel !!! exactement ce que je voulais
cs_Waldo2188
Messages postés142Date d'inscriptionjeudi 12 février 2004StatutMembreDernière intervention20 mai 2008 11 sept. 2007 à 22:58
Salut,
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.
++
clam13
Messages postés3Date d'inscriptionjeudi 25 novembre 2004StatutMembreDernière intervention12 septembre 2007 11 sept. 2007 à 21:47
Salut, encore merci pour ce script, pourrais-tu me donner un exemple de code à ajouter à ta fonction pour vérifier qu'une <option> est sélectionné dans un <select>.J'ai essayé ça mais marches pas!(je débute):
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
cs_Waldo2188
Messages postés142Date d'inscriptionjeudi 12 février 2004StatutMembreDernière intervention20 mai 2008 12 janv. 2007 à 11:51
Salut,
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!
florian_x2
Messages postés1Date d'inscriptionlundi 8 janvier 2007StatutMembreDernière intervention11 janvier 2007 11 janv. 2007 à 16:51
Merci pour ce script qui marche super (mis à part qu'il manque un ' devant checkbox à la ligne 3).
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
cs_garfield90
Messages postés388Date d'inscriptionlundi 7 juillet 2003StatutWebmasterDernière intervention10 février 2009 16 oct. 2006 à 12:17
Ce javascript permet d'avoir un message d'erreur générique ( champ a renseigner ) et en aucun cas une aide a l'utilisateur.
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
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
cs_Waldo2188
Messages postés142Date d'inscriptionjeudi 12 février 2004StatutMembreDernière intervention20 mai 2008 16 oct. 2006 à 10:48
C'est clair que les messages d'alert c'est lourd!
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 ;)
cs_garfield90
Messages postés388Date d'inscriptionlundi 7 juillet 2003StatutWebmasterDernière intervention10 février 2009 11 oct. 2006 à 15:28
Ton code a l'air propre, mais je trouve que tu fais une erreur dans l'utilisation de ta fonction.
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
cs_Waldo2188
Messages postés142Date d'inscriptionjeudi 12 février 2004StatutMembreDernière intervention20 mai 2008 10 oct. 2006 à 13:02
Salut,
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
kiki2sirom
Messages postés153Date d'inscriptionmardi 17 août 2004StatutMembreDernière intervention23 décembre 2010 9 oct. 2006 à 15:28
alors là je ne suis pas tout à fait d'accord sur le côté "pas mal" de ce code...
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
younes371
Messages postés502Date d'inscriptionmercredi 29 décembre 2004StatutMembreDernière intervention20 mars 2012 6 oct. 2006 à 23:37
ça à l'air pas mal, je te met 5/10.
et je te demande si tu pe mettre un fichier .htm complet, avec des champs?, pour savoir ou tu fais appel à tes fonctions.
stef1589
Messages postés44Date d'inscriptiondimanche 19 mars 2006StatutMembreDernière intervention27 mars 2008 6 oct. 2006 à 17:21
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