Vérifier que tous les champs sont remplis

**nico_loin** · 18/12/2012, 11h15

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**pid59** · 18/12/2012, 11h56

Hello, voici ce que je ferai simplement :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bovino** · 18/12/2012, 13h53

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Comment récupérer l'état de cases à cocher ?.

**sekaijin** · 18/12/2012, 14h20

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**nico_loin** · 19/12/2012, 09h54

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

**Bovino** · 19/12/2012, 09h59

Envoyé par ton code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**nico_loin** · 19/12/2012, 10h07

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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é

**nico_loin** · 19/12/2012, 10h12

Envoyé par Bovino

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

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

**Bovino** · 19/12/2012, 10h17

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)...

**nico_loin** · 19/12/2012, 10h29

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');

**Bovino** · 19/12/2012, 10h34

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

**sekaijin** · 19/12/2012, 10h40

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**nico_loin** · 19/12/2012, 10h53

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 ... ?

**nico_loin** · 19/12/2012, 11h14

J'arrive pas à voir à quoi correspond le name passé en paremètre à la fonction

**Bovino** · 19/12/2012, 11h16

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

**nico_loin** · 19/12/2012, 11h20

Envoyé par Bovino

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

La fonction est appelée par name donc tout les name de mon fichier ?!

**Bovino** · 19/12/2012, 11h24

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...

**nico_loin** · 19/12/2012, 11h25

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') ...

Vérifier que tous les champs sont remplis

JavaScript

Discussions similaires

Partager

Partager