Vérifier que tous les champs sont remplis

Version imprimable

Bonjour,
J'ai un formulaire qui contient différents boutons radio pour chaque catégories. J'ai un script en javascript qui vérifie que l'utilisateur a coché à au moins 1 bouton pour chaque catégorie lorsqu'il envoie le formulaire.
Le problème c'est que le message d'erreur apparait que sous Chrome, et non sur firefox ni ie ...
Voici mon code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="conteneur_principal">
            <form name="formulaire" method="post" action="formulaire.php" onsubmit="return Verif()">
                <div id="note">
                    <b>Critère 1</b><br/>
                    <TABLE id="notation" BORDER="0">
                        <TR>
                            <TH> 0 </TH>
                            <TH> 1 </TH>
                            <TH> 2 </TH>
                            <TH> 3 </TH>
                            <TH> 4 </TH>
                            <TH> 5 </TH>
                        </TR>
                        <TR>
                            <TD> <input style="border:none;" type="radio" name="notesA" id="note00" value="0" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesA" id="note01" value="1" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesA" id="note02" value="2" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesA" id="note03" value="3" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesA" id="note04" value="4" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesA" id="note05" value="5" /> </TD>
                       </TR>
                    </TABLE> 
                </div>
           </div>

Après j'ai pareil pour critère 2, puis ce qui change c'est name="notesB"

Puis mon code JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function Verif() {
            var rempli=0;
                if(document.forms['formulaire'].elements['notesA'].value==''){rempli++;}
                if(document.forms['formulaire'].elements['notesB'].value==''){rempli++;}
 
              if(rempli==0) {
                    return true;
                } else {
                    alert('Veuillez remplir tous les champs');
                    return false;
                }
            }

Je vois pas pourquoi ça marche sous chrome mais pas firefox ni ie... Y'a t'il une autre façon de tester que chaque critère ai au moins 1 notation ?
Merci

Hello, voici ce que je ferai simplement :

Code:

1
2
3
4
5
6
7
8
9
 
function Verif() {
  var inputs = document.getElementsByTagName('input');
  for(var i = 0; i < inputs.length; i++ {
    if(inputs[i].value !== '') return true;
  }
  alert('Veuillez remplir tous les champs !');
  return false;
}

Ça devrait faire l'affaire ;)

18/12/2012, 13h53
Bovino

pid59, ta solution n'est pas bonne !
D'une part, tu vérifies juste si au moins un champ est différent d'une chaine vide, d'autre part, ça ne prend pas en compte les champs de type radio, checkbox, select...

nico_loin :

Code:

if(document.forms['formulaire'].elements['notesA'].value==''){rempli++;}

à quel élément au juste correspond elements['notesA'] selon toi ?
En tout cas, pour les navigateurs, c'est le navigateur qui décide... Sachant que logiquement, si plusieurs champs ont le même nom, c'est une collection HTML qui devrait être renvoyée, ce qui signifie qu'en fait, c'est le comportement de Chrome qui n'est pas conforme.
Il faut que tu boucles sur chacun des éléments ayant le même name pour savoir si au moins un a la propriété checked qui vaut true.
:faq: :fleche: Comment récupérer l'état de cases à cocher ?.

pour chaque nom à vérifier il faut vérifier qu'au moins un imput du groups est coché

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function validate(name) {
  colection = document.getElementsByName(name);
  var res = false;
  for(var i = 0; i < colection.length; i++) {
    res = res | colection[i].checked;
  }
  return res;
}
 
function Verif() {
  var res = validate('notesA');
  res = res  && validate('notesB');
  res = res  && validate('notesC');
  ...
  if (!res) {
    alert('Veuillez remplir tous les champs');
  }
  return res;
}

A+JYT

19/12/2012, 09h54
nico_loin

Citation:

Envoyé par Bovino

pid59, ta solution n'est pas bonne !
D'une part, tu vérifies juste si au moins un champ est différent d'une chaine vide, d'autre part, ça ne prend pas en compte les champs de type radio, checkbox, select...

nico_loin :

Code:

if(document.forms['formulaire'].elements['notesA'].value==''){rempli++;}

à quel élément au juste correspond elements['notesA'] selon toi ?
En tout cas, pour les navigateurs, c'est le navigateur qui décide... Sachant que logiquement, si plusieurs champs ont le même nom, c'est une collection HTML qui devrait être renvoyée, ce qui signifie qu'en fait, c'est le comportement de Chrome qui n'est pas conforme.
Il faut que tu boucles sur chacun des éléments ayant le même name pour savoir si au moins un a la propriété checked qui vaut true.
:faq: :fleche: Comment récupérer l'état de cases à cocher ?.

Dans ton lien, pour parcourir mon document dans le for, le "nomdescases" ça correspond à quoi pour moi ? Parceque noteA, noteB ... je peux pas leur donner le meme name sinon je pourrais pas distinguer leur note

Citation:

Envoyé par ton code

Code:

1
2
3
4
5
6
<TD> <input style="border:none;" type="radio" name="notesA" id="note00" value="0" /> </TD>
<TD> <input style="border:none;" type="radio" name="notesA" id="note01" value="1" /> </TD>
<TD> <input style="border:none;" type="radio" name="notesA" id="note02" value="2" /> </TD>
<TD> <input style="border:none;" type="radio" name="notesA" id="note03" value="3" /> </TD>
<TD> <input style="border:none;" type="radio" name="notesA" id="note04" value="4" /> </TD>
<TD> <input style="border:none;" type="radio" name="notesA" id="note05" value="5" /> </TD>

Bah... ça doit être mes yeux alors, parce que moi, je vois plusieurs fois le même name... :whistle:

J'ai essayé ton code Sekaijn mais ça ne marche pas, et je t'avoue ne pas tout comprendre.

Sinon j'ai essayé en faisant comme ca :

Code:

1
2
3
4
5
6
7
8
for (i=0; i<document.formulaire.notesA.length; i++) {
                    if (document.formulaire.notesA[i].checked) {
                        return true;
                    } else {
                        alert('Veuillez remplir tous les champs');
                        return false;
                    }
                }

Mais ça me retourne tout le temps "Veuillez remplir tous les champs" même si j'ai bien tout coché :(

Citation:

Envoyé par Bovino

Bah... ça doit être mes yeux alors, parce que moi, je vois plusieurs fois le même name... :whistle:

Ah oui, enfait dans ma page j'ai plusieurs table avec le même code, c'est juste le name qui change pour chaque critère, par exemple j'ai :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<TABLE id="table_notation" BORDER="0">
                        <TR>
                            <TH> 0 </TH>
                            <TH> 1 </TH>
                            <TH> 2 </TH>
                            <TH> 3 </TH>
                            <TH> 4 </TH>
                            <TH> 5 </TH>
 
                        </TR>
                        <TR>
                            <TD> <input style="border:none;" type="radio" name="notesA" id="note00" value="0" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesA" id="note01" value="1" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesA" id="note02" value="2" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesA" id="note03" value="3" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesA" id="note04" value="4" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesA" id="note05" value="5" /> </TD>
                        </TR>
                    </TABLE>

Puis ensuite j'ai un autre critère donc mon table est de cette forme :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<TABLE id="table_notation" BORDER="0">
                        <TR>
                            <TH> 0 </TH>
                            <TH> 1 </TH>
                            <TH> 2 </TH>
                            <TH> 3 </TH>
                            <TH> 4 </TH>
                            <TH> 5 </TH>
 
                        </TR>
                        <TR>
                            <TD> <input style="border:none;" type="radio" name="notesB" id="note00" value="0" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesB" id="note01" value="1" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesB" id="note02" value="2" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesB" id="note03" value="3" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesB" id="note04" value="4" /> </TD>
                            <TD> <input style="border:none;" type="radio" name="notesB" id="note05" value="5" /> </TD>
                        </TR>
                    </TABLE>

Je sais pas si je suis vraiment clair ...

19/12/2012, 10h17
Bovino

Citation:

Envoyé par nico_loin

Mais ça me retourne tout le temps "Veuillez remplir tous les champs" même si j'ai bien tout coché :(

Ben c'est normal... si le premier n'est pas coché, tu fais ton return false !
C'est à la fin de la boucle qu'il faut le faire (un peu comme dans l'exemple de sekaijin en fait)...
19/12/2012, 10h29
nico_loin

Dans ce qu'a fait Sekaijn y'a plusieurs truc que je comprends pas.
Le titre de la fonction qui prend en paramètre name, ça correspond à quelle valeur ?
Ensuite, je devrais faire autant de for que j'ai de critères, soit de notesA, notesB ... ?
Et je comprends pas cette ligne: var res = validate('notesA');
19/12/2012, 10h34
Bovino

Ca ce sont les bases... Si tu ne les maitrise pas, c'est peut-être par là qu'il faudrait commencer non ?

Citation:
Envoyé par nico_loin
J'ai essayé ton code Sekaijn mais ça ne marche pas, et je t'avoue ne pas tout comprendre.

Sinon j'ai essayé en faisant comme ca :
Code:

1 2 3 4 5 6 7 8 for (i=0; i<document.formulaire.notesA.length; i++) { if (document.formulaire.notesA[i].checked) { return true; } else { alert('Veuillez remplir tous les champs'); return false; } }
Mais ça me retourne tout le temps "Veuillez remplir tous les champs" même si j'ai bien tout coché :(
Ce n'est pas le code que j'ai fourni

j'ai bien fait deux fonction une qui vérifie une note l'autre qui parcour toutes les notes
si tu fait un return à chaque test tu ne teste que le premier input
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 //une note est valide si au moins un des imputs a son atribut cheched à true function validate(name) { //on récupère tous les imput correspondant à la note colection = document.getElementsByName(name); //a priori aucun imput n'est coché var res = false; for(var i = 0; i < colection.length; i++) { //le résultat est valide si le résultat des étapes précédentes est valide //OU si l'imput que l'on traite est valide. res = res | colection[i].checked; } //res contient donc true ou false suivant que la note est valide ou pas il suffit de retourner la valeur return res; } function Verif() { //le formulaire est valide si toutes les notes sont valides //pour que le formulaire soit valide il faut que la note noteA soit valide. var res = validate('notesA'); //pour que le formulaire soit valide il faut que toutes les notes précedentes soit valides //ET que noteB soit valide. res = res && validate('notesB'); //pour que le formulaire soit valide il faut que toutes les notes précedentes soit valides //ET que noteC soit valide. res = res && validate('notesC'); ... //res contient donc true ou false suivant que le formulaire est valide ou pas if (!res) { // si le formulaire est invalide on affiche une alerte. alert('Veuillez remplir tous les champs'); } //res true ou false suivant que le formulaire est valide ou pas il suffit de retourner la valeur return res; }
Il n'y a aucun IF à faire pour vérifier les champs vu que l'attribut checked est un booléen
validate vérifie UNE note
Je pensais que le code était simple
pour tous les inputs correspondant à la note à traiter on fait un OU (booléen) de l'attribut checked
on optient donc la note N est valise si au moins un des inputs est coché.

la méthode verif doit vérifier que TOUTES les notes sont valide c'est donc simplement un ET (booléen) de la validité des notes soit donc validate('notesA') && validate('notesB') && validate('notesC') etc. la encore il n'y a aucun IF à faire juste un ET des valeurs booléennes.

pour finir si la vérification est false on affiche une alerte
et dans tous les cas on retourne le résultat.

Note: C'est une erreur grossière de débutant et une habitude dépourvue de sens de la part de certain. on ne fait JAMAIS
if (tue == myvar) {return true;} else {return false;} mais simplement return myvar;.
de même on ne fait pas if (tue == myvar)... mais simplement if (myvar)...
Je ne vois vraiment pas comment un code pourait être plus simple.

A+JYT

19/12/2012, 10h53
nico_loin

Ok je comprends un peu mieux.
Par contre, pour cette ligne: colection = document.getElementsByName(name);
elle récupère la valeur de tout mes name=notesA, name=notesB ... ?
19/12/2012, 11h14
nico_loin

J'arrive pas à voir à quoi correspond le name passé en paremètre à la fonction
19/12/2012, 11h16
Bovino

Il suffit pourtant de regarder avec quel paramètre est appelée la fonction... :roll:
19/12/2012, 11h20
nico_loin

Citation:

Envoyé par Bovino

Il suffit pourtant de regarder avec quel paramètre est appelée la fonction... :roll:

La fonction est appelée par name donc tout les name de mon fichier ?!
19/12/2012, 11h24
Bovino

Non !
Elle est définie avec un paramètre name mais appelée avec la valeur souhaitée pour ce paramètre !

Encore une fois, connaitre les bases de la programmation est considéré comme important avant de programmer...
19/12/2012, 11h25
nico_loin

OK j'ai compris !!!
Enfait la fonction verif fait appel à chaque fois à la fonction validate puisque dans verif j'ai une ligne pour toutes mes notes grace à validate('notesA') ...