Validation d'un formulaire par le bouton entrée !

Version imprimable

16/11/2009, 14h12
Le Mad

Validation d'un formulaire par le bouton entrée !

Bonjour à tous,

Je souhaiterai empêcher la validation d'un formulaire par le bouton enter, excepté lorsque le bouton est sélectionné par navigation du curseur à l'aide du clavier (touche Tab).
Pour désactiver la validation du bouton "Enter", j'ai simplement rajouté la ligne :

Code:

<form action="" id="" method="post" onkeypress="if(event.keyCode == 13) return false;">

Il me reste donc la problématique de la validation du formulaire par la touche Enter dans le cas d'une personne ne se servant pas de sa souris.
Par ailleurs, mes boutons sont de type Submit, et je n'ai pas la possibilité de changer de type.

Merci d'avance pour votre aide.
16/11/2009, 14h21
vermine

Bonjour,

Peut-être qu'au onfocus du bouton, il faut changer le onkeypress du formulaire ?
16/11/2009, 14h29
Le Mad

C'est à dire ? J'ai bien peur de ne pas te suivre...

Je dois rajouter un événement onFocus sur mon bouton ? J'ai essayé, mais cela ne mène à rien...
Grosso modo, il faudrait que je rajoute une condition && dans ma balise form pour savoir si il y a focus sur mon bouton, mais là, je ne sais pas faire...

Merci pour ta réponse.
16/11/2009, 14h34
vermine

C'était peut-etre pas le onfocus mais le onblur ou bien le onselect ?
Si on arrive sur le bouton, il faut lancer une fonction Javascript qui va mettre à jour le onkeypress du formulaire pour enlever le return false.
Seulement, il faudra le remettre si on quitte le bouton.
16/11/2009, 15h33
SpaceFrog

sinon enlève le bouton submit et remplace le par un input type button
avec dans son onclick:

Code:

onclick=" if(this.form.onsubmit){this.form.submit()}"
16/11/2009, 15h34
vermine

Sous réserve:

Citation:

Envoyé par Le Mad

Par ailleurs, mes boutons sont de type Submit, et je n'ai pas la possibilité de changer de type.
16/11/2009, 16h29
Le Mad

La solution de Spacefrog est la meilleure qui soit, merci à lui. ;)

Si tu veux absolument garder ton input de type submit, je ne vois que ça

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
 
                <form id="monForm" action="http://developpez.com">
			<input type="text" name="param"/>
			<br/>
			<input type="submit" onfocus="setIsFocused()" onblur="setIsNotFocused()" value="soumettre" onclick="forceSubmit();"/>
		</form>
 
		<script>
 
			var isBtnFocused = false;
 
			function setIsFocused(){
				isBtnFocused = true;
			}
			function setIsNotFocused(){
				isBtnFocused = false;
			}
 
			function forceSubmit(){
				if(isBtnFocused)
					document.getElementById("monForm").submit();
			}
 
			function init(){
				var form = document.getElementById("monForm");
				form.onsubmit = function(e){
					e.preventDefault();
				};
			}
			init();
 
		</script>

Pis bah sinon c'est clair qu'utiliser un type button plutôt qu'un submit règle le problème plus simplement ! :?

17/11/2009, 09h02
Le Mad

Bonjour à tous,

Alors, j'ai enlevé le tag "Résolu" pour la simple et bonne raison que la solution de SpaceFrog ne marche que sur un seul de mes formulaires. En effet, je dois appliquer cette politique à 3 formulaire.

Pour les deux autres, il m'est impossible avec cette solution de valider le formulaire par le bouton entrée et même par click !!!
Cependant, si je simplifie ta solution par :

Code:

<input type="button" ..... onclick="this.form.submit()"/>

J'obtiens bien un résultat, mais qui ne convient pas, les tests ajax de validation n'étant pas traités. :(

julioooo, j'ai testé ta proposition, mais elle ne fonctionne pas, merci tout de même pour ton aide.

A bientôt.
17/11/2009, 09h09
vermine

A la place du submit, appelez votre fonction Ajax et mettez le submit dans la fonction retour de la fonction Ajax.

Salut à vous !
Code:

1 2 3 4 5 6 7 8 9 10 11 function init(){ var form = document.getElementById("monForm"); form.onsubmit = function(e){ var event = e || window.event; if (event.preventDefault) { event.preventDefault(); // FF } event.returnValue = false; // IE }; }
Le Mad j'avais pas essayé sous IE :aie:, j'ai retrouvé un pti bout de code sur le forum et la c'est bueno, essayes en remplaçant la fonction init() par celle la !

17/11/2009, 11h28
Le Mad

julioooo, ton script ne répond pas à mes attentes, le formulaire est tout de même validé sans vérification.

vermine, j'ai utilisé ce que tu m'as dit, soit :

Code:

<input type="button" id="validSendCourrier" value="Valider" class="btnform155v" onclick="validateSendCourrier()"/>

Et cela marche parfaitement, merci à tous pour votre aide. ;)