Retrouver le focus après non validation d'un champ de formulaire.

**pidlas** · 17/06/2010, 16h45

Bonjour,

J'essaye de repositionner le curseur dans le champ d'un formulaire après que la vérification du champ en js ait retournée 'false' pour inciter l'utilisateur à saisir le champ sans passer au champ suivant. Pour cela j'utilise le bout de code suivant :

Code :

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

1
2
3
4
5
6
7
8
 
function surligne(champ, erreur){
	if(erreur){
		champ.style.backgroundColor = "#fba";
		champ.focus();
	}
	else champ.style.backgroundColor = "";
}

Cela ne fonctionne pas.
Le fond change bien de couleur mais le curseur passe sur le champ suivant et ne revient pas sur le champ qui n'a pas été validé.

Ce fonctionnement est-il réalisable avec la fonction focus()?
Si oui comment faire ?
Merci pour vos réponses.

**SpaceFrog** · 17/06/2010, 16h49

ce ne serait pas parce que tu enchaine les fonctions de verification ?

**RomainVALERI** · 17/06/2010, 16h56

Ou est placé l'appel à cette fonction ? dans une fonction de vérification globale du formulaire au moment du submit ? sur le onblur de chaque champ ?

Montre-nous en plus si tu veux de l'aide

**vermine** · 17/06/2010, 18h25

Ouep, comme l'a dit SpaceFrog dans l'autre topic, c'est à cause de la gestion des vérifications en plusieurs fonctions. Vous lancez toutes les vérifications même si la première est fausse. Alors oui, là comme ça, vous avez tous les champs erronés en rouge en une fois, ce qui est plutôt sympa pour l'utilisateur. C'est très bien, mais le focus est sur le dernier, forcément.

Donc, peut-être qu'en inversant l'ordre des vérifications (l'appel des fonctions), le focus se mettra sur le premier champ erroné ?

Ca, c'est pour quand on clique sur le submit.

Maintenant, vous vérifiez à chaque onblur si le champ est vide. Je pense qu'il y a une sorte de boucle infinie avec ce système. Cliquez sur le premier champ, cliquez à côté du champ, le focus est bien dans le premier champ. Cliquez une seconde fois ou bien cliquez sur le champ suivant, le script tourne en rond.

**SpaceFrog** · 17/06/2010, 18h52

le plus simple serait de faire une seule fonction (cf lien de la contribution)

**pidlas** · 19/06/2010, 09h21

Réponse pour Romain
Je ne suis pas d'accord quand tu dis que je lance la vérif sur tous les champs. Chaque champ appelle sa propre fonction: titre appelle veriftitre, an appelle verifan, etc...

C'est une réponse pour SpaceFrog, vermine et romain

Voilà comment cela fonctionne dans mon prog.

Je vérifie la saisie de chaque champ de mon formulaire sur un onblur. Ex : onblur="veriftitre(this);". veriftitre à son tour appel surligne qui change la couleur de fond du champ si la saisie n'est pas conforme.

Ensuite je vérifie la saisie de tout le formulaire avec un submit controlé par un onsubmit="verifform(this);". Le verifform fait également appel aux mêmes fonctions veriftitre etc... et j'ajoute une condition sur les valeurs booléennes des variables pour relancer la page de formulaire s'il y a une erreur.

A ce propos qu'elle est la façon la plus élégante de programmer cette redirection ? window.open me semble trop brutal.

vermine me dit qu'il semble y avoir une boucle dans mes contrôles. Et SpaceFrog me demande de changer ma logique de programmation. J'aimerais trouver une solution avec ma propre logique.

Je vais tester ta proposition SpaceFrog et je déciderai après.

Merci pour votre aide néanmoins.

**RomainVALERI** · 19/06/2010, 13h01

Envoyé par pidlas

Réponse pour Romain
Je ne suis pas d'accord quand tu dis que je lance la vérif sur tous les champs.

j'ai dit ça moi ?

Mais effectivement jette un oeil à l'exemple présent dans les contributions, ça semble bien correspondre à ton besoin

**SpaceFrog** · 19/06/2010, 18h37

je viens de tester ce code qui me parait fonctionnel.
la validation imposant qu'aucun champs ne soit vide, le focus est rendu au premier champs non renseigné

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript">
function verif(){
var retour=false
document.getElementById('un').value.length==0 && (retour=document.getElementById('un'));
document.getElementById('deux').value.length==0 && (retour=(retour)?retour:document.getElementById('deux'));
document.getElementById('trois').value.length==0 && (retour=(retour)?retour:document.getElementById('trois'));
if(retour){retour.focus()}
return (!retour)
}
</script>
<title>Nouvelle page 1</title>
</head>
<body>
<form action="javascript:alert('validé')" onsubmit="return verif()" >
<input type="text" id="un" value="" />
<input type="text" id="deux" value="" />
<input type="text" id="trois" value="" />
<input type="submit" value="go" />
</form>
</form>
</body>
</html>

[edit] des fois je me lance tout seul dans un concours du code le plus incompréhensible ^^