formulaire non bloqué malgré erreur interceptée

Version imprimable

Bonjour à tous,

Voilà, j'ai un cas très simple d'utilisation javascript, qui fonctionne en partie, mais je ne comprend pas pourquoi ça ne fonctionne pas jusqu'au bout.

Voilà, je précise, je travaille en environnement Zend, au cas ou...

j'ai créé la fonction suivante sur mon formulaire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function controlForm(){ if (document.getElementById('pays').value == "" ) { document.getElementById('pays-label').style.color='red'; document.forms['monForm'].pays.focus(); document.getElementById('data-label').style.color='red'; alert('test affichage'); return false; } else { document.getElementById('pays-label').style.color='#9C9E9F'; } }
Lorsque je valide mon formulaire 'monForm', mon message 'Test affichage' apparaît correctement à l'écran, de même que la mise en rouge des label demandés, mais il valide tout de même le formulaire, et donc je suis redirigé vers la page paramétrée dans l'attribut "action" de mon formulaire... 8O

Quelqu'un pourrait-il me dire pourquoi malgré le "return false", l'action de mon formulaire s'exécute ?

Merci.

Vince

21/02/2012, 17h14
Bovino
Citation:

Quelqu'un pourrait-il me dire pourquoi malgré le "return false", l'action de mon formulaire s'exécute ?

Non, pas tant qu'on aura pas vu comment cette fonction est appelée !

Ceci dit, une piste probable.
Lorsque tu écris par exemple

Code:

<form onsubmit="controlForm()">

cela va créer une fonction anonyme qui elle appellera controlForm(), un peu comme si tu avais
Code:

1 2 3 HTMLFormElement.onsubmit = function(){ controlForm(); }
ce qui fait que le return de ta fonction de contrôle est renvoyé à la fonction anonyme, qui elle ne renvoie rien.
Il faut donc écrire :

Code:

<form onsubmit="return controlForm()">

pour que cette fonction anonyme renvoie un résultat qui inhibera (ou non) le comportement par défaut.
21/02/2012, 17h25
vince29

autant pour moi pour le manque d'info.

mon script est appelé sur le bouton du formulaire :

Code:

<input type="submit" name="payer" onClick="controlForm();" class="formulaireSubmit" value="Payer" tabindex="" />
21/02/2012, 18h23
Golgotha

Je pense que la réponse a été formulée par Bovino dans le message d'avant 8-)

Hello !

Je pense que tu devrais faire comme ceci :

Code:

<input type="button" name="payer" onClick="controlForm();" class="formulaireSubmit" value="Payer" tabindex="" />

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function controlForm(){
 
	if (document.getElementById('pays').value == "" ) {
		document.getElementById('pays-label').style.color='red';
      	document.forms['monForm'].pays.focus(); 
      	document.getElementById('data-label').style.color='red';
      	alert('test affichage');
      	return false;
    } else {
      	document.getElementById('pays-label').style.color='#9C9E9F';
        document.forms['monForm'].submit();
    } 	
}

22/02/2012, 08h39
SpaceFrog

Je pense que Beef à tout dit :

Code:

<form onsubmit="return controlForm()">

en résumé pas de onclick sur le bouton submit, mais un onsubmit dans la balise form ...
22/02/2012, 08h53
vince29

bonjour à tous,
merci à Bovino, et à ceux qui ont insisté pour dire que Bovino avait tout dit...
merci encore.
Vince