Validation formulaire HTML + submit

Version imprimable

Bonjours,

j'ai un formulaire html dont je demande à l'utilisateur de saisir des valeurs dans au moins 4 champs obligatoirement. Quand il appuis sur le bouton enregistrer je vérifie cela en javascript, et je lui affiche un message si des champs font défaut (ça c'est la partie qui fonctionne).
Néanmoins dans le cas où tout est bien rempli mon js ne submit pas les champs.

Voici mon code:

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
<form method="post" name="monForm" id="monForm" action="index.php" />
<input type="hidden" name="page" value="new_user_form_ctrl"/>
 
<div id="bluebackground">
	<table>
		<tr>
			<td class="important">Filiales:</td> <td><select name="filiale_list" >
													<option value=''>Selectionnez...</option>
                                            <?php while($data = mysql_fetch_assoc($filiales)) { 
                                                                                                echo '<option value="'.$data['id_filiale'].'">'.$data['nom_filiale'].'</option>';
                                                                                        } ?>
                                        </select>
			</td>
		</tr>
		<tr><td></td><td>M <input type="radio" name="sexe" value="M" checked> Mme <input type="radio" name="sexe" value="Mme" ></td></tr>
		<tr><td class="important">Nom:</td>     <td><input type="text" id="name" name="nom" size="15" /></td></tr>
		<tr><td class="important">Prénom:</td>  <td><input type="text" id="surname" name="prenom" size="15" /></td></tr>
		<tr>
			<td class="important">Services:</td> <td><select name="service_list" 
			onclick="sendData('recherche_chefservice='+this.value,'ajax/ajax_chefservice.php','span_chefservice');">
                                            <option value="">Sélectionnez...</option>
											<?php while($data = mysql_fetch_assoc($services)) { 
                                                                                                echo '<option value="'.$data['id_service'].'">'.$data['nom_service'].'</option>';
                                                                                        } ?>
                                        </select>
			</td>
		</tr>
	</table>
 
    <div class="centrer"><input type="submit" name="back" value="RETOUR" /></div> 
	<div class="important"><input type="button" name="enregistrer" value="ENREGISTRER" onClick="validerForm(this.form)" /></div>
 
</div>
</form>

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
<SCRIPT language="javascript">
   function validerForm(formulaire) {
		if (formulaire.filiale_list.value == '') {
			alert("Vous devez choisir une filiale pour continuer!");
			formulaire.filiale_list.focus();
			return false;
		} else if (formulaire.nom.value == '') {
			alert("Vous devez saisir un nom pour continuer!");
			formulaire.nom.focus();
			return false;
		} else if (formulaire.prenom.value == '') {
			alert("Vous devez choisir un prénom pour continuer!");
			formulaire.prenom.focus();
			return false;
		} else if (formulaire.service_list.value == '') {
			alert("Vous devez choisir un service pour continuer!");
			formulaire.service_list.focus();
			return false;
		} else {
			formulaire.submit();
			return true;
		}
   }
</SCRIPT>

Si quelqu'un a une idée...

03/12/2012, 16h52
DrDarko

Bonjour,

Peut être parce que ton bouton envoyer est de type button et ton bouton back est de type submit...?

Après j'ai pas regardé plus que ça.
04/12/2012, 08h34
Benduroy

Je viens de mettre les deux boutons de type button, aucun changement. Par contre si je les mets tout les deux de type submit, même si je n'ai pas un champs de rempli, le message d'erreur s'affiche, puis ça valide quand même quoi qu'il arrive et ce n'est pas ce que je souhaite :?
04/12/2012, 08h43
Bovino

Code:

onClick="validerForm(this.form)"

Il faut voir les attributs d'événements comme des fonctions anonymes.
Du coup, lorsque tu cliques sur le bouton, tu appelles, via une fonction anonyme, la fonction validerForm(), cette fonction renvoie un booléen à la fonction anonyme, le problème, c'est que cette valeur de retour, tu n'en fais rien, du coup, le formulaire est validé...

Code:

onClick="return validerForm(this.form)"
04/12/2012, 08h46
SpaceFrog

l'evenement onsubmit du form est fait pour celà:
dans la balise form

Code:

onclick="return validerForm(this.form)"

sans C majuscule et pour la balise script :

Code:

<script type="text/javascript">

Non toujours pas, ça ne valide pas quand j'envoie avec les champs correctement renseignés.

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
<script type="text/javascript">
   function validerForm(formulaire) {
		if (formulaire.filiale_list.value == '') {
			alert("Vous devez choisir une filiale pour continuer!");
			formulaire.filiale_list.focus();
			return false;
		} else if (formulaire.nom.value == '') {
			alert("Vous devez saisir un nom pour continuer!");
			formulaire.nom.focus();
			return false;
		} else if (formulaire.prenom.value == '') {
			alert("Vous devez choisir un prénom pour continuer!");
			formulaire.prenom.focus();
			return false;
		} else if (formulaire.service_list.value == '') {
			alert("Vous devez choisir un service pour continuer!");
			formulaire.service_list.focus();
			return false;
		} else {
			formulaire.submit();
			return true;
		}
   }
</script>

Code:

1
2
    <div class="centrer"><input type="submit" name="back" value="RETOUR" /></div> 
	<div class="important"><input type="submit" name="enregistrer" value="ENREGISTRER" onclick="return validerForm(this.form)" /></div>

Je reviens bien sur ma page, tout les champs sont effacés, et la requête ne s'est pas lancée. Alors que si j'enlève le onclick, elle se lance, j'ai testé

04/12/2012, 09h00
SpaceFrog
il faut peut etre reflechir à la chornologie ...
Code:

1 2 3 4 5 else { formulaire.submit(); return true; }
pourquoi soumets tu le form ???? alors que le comportement par defaut du bouton est de soumettre le form si tu ne le contrecarres pas avec un return false ...

=>
Code:

1 2 3 4 else { return true; }
04/12/2012, 09h02
Benduroy

Ah oui excellent. C'était ça entre autre.
Merci :)