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

Version imprimable

17/06/2010, 16h45
pidlas

Retrouver le focus après non validation d'un champ de formulaire.
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:

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.
17/06/2010, 16h49
SpaceFrog

ce ne serait pas parce que tu enchaine les fonctions de verification ?
17/06/2010, 16h56
RomainVALERI

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 ? :koi:

Montre-nous en plus si tu veux de l'aide :)
17/06/2010, 18h25
vermine

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é ? :D
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.
17/06/2010, 18h52
SpaceFrog

le plus simple serait de faire une seule fonction (cf lien de la contribution)
19/06/2010, 09h21
pidlas

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.;)
19/06/2010, 13h01
RomainVALERI

Citation:

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.

8O j'ai dit ça moi ? :koi:

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

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:

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

19/06/2010, 18h52
pidlas

Citation:

Envoyé par RomainVALERI

8O j'ai dit ça moi ? :koi:

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

:oops:

désolé.

Merci pour vos réponses.
19/06/2010, 20h17
RomainVALERI

Citation:

Envoyé par SpaceFrog

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

Citation:

Envoyé par SpaceFrog

Code:

return (!retour)

Je veux bien une aspirine, siouplait :aie: