Discussion :

[Stev_k]

Bonjour,
Je plenche actuellement sur la vérification de mon formulaire côté client. J'ai voulu qu'elle se face pendant que l'utilisateur rempli le formulaire.
Pour les champs texte, j'utilise l'événement onkeyup, et ça marche impecc. Mais hélas, deux problèmes se posent:
Primo,Onkeyup ne fonctionne pas sur les balises sélect et radio. Ni onselect ou onclick d'ailleurs.
Deuxio, lorsque le navigateur à enregistré une valeur pour un champs précis (genre tu commence à remplir le champs et le navigateur te propose une valeur) et que tu cliques sur cette valeur, la vérification n'est pas instantanée.
J'aimerais avoir des pistes pour solutionner ces problèmes.
Merci

[Watilin]

Salut,

on ne dit pas solutionner on dit résoudre Désolé, ce n’est pas de ta faute mais ce mot m’agace.

les évènements de formulaire ont été conçus en tenant compte de l’accessibilité des navigateurs, et il faut considérer deux approches pour bien les comprendre : l’approche clavier et l’approche souris/tactile.

Il faut également comprendre le mécanisme du focus : quand un élément a le curseur clignotant ou une bordure pointillée, on dit qu’il a le focus. C’est cet élément qui reçoit les frappes au clavier. Un élément qui prend le focus émet un évènement focus ; un élément qui perd le focus émet un évènement blur.

L’approche souris est la mieux comprise car elle est utilisée par la majorité des utilisateurs. Lorsqu’on utilise la souris pour interagir avec un formulaire, les évènements produits sont click, focus et blur, ainsi que change.

Le comportement de change dépend du type d’élément : pour les champs de texte, il n’est émis que lorsque le champ perd le focus, afin d’éviter que de nombreux change soient émis pendant la saisie du texte, ce qui pourrait perturber l’utilisateur. Pour tous les autres éléments, il est émis immédiatement. Comme son nom l’indique, change n’est émis que lorsque la valeur de l’élément est changée.

L’approche clavier est moins utilisée, à tel point que des développeurs d’interfaces se permettent de ne pas l’implémenter correctement, voire de ne pas l’implémenter du tout. On a tendance à penser que la navigation au clavier est réservée aux logiciels d’assistance, mais un navigateur ordinaire la gère parfaitement.

Lorsqu’on interagit avec un formulaire au clavier, la touche entrée sert à valider le formulaire entier (sauf dans un <textarea>). Il a donc fallu assigner une autre touche pour « activer » les élements (bouton radio, case à cocher, etc.), il s’agit de la touche espace. Pour passer d’un élément à l’autre, on utilise tab (ou maj+tab), et pour changer la valeur d’une liste de boutons radio ou d’un <select>, on utilise les flèches. On peut également déplier/replier un <select> avec espace et entrée respectivement. Tout ça nécessite un peu d’entraînement au début, mais c’est le comportement habituel des interfaces accessibles. Mettre en œuvre un autre mécanisme d’interaction, c’est faire une entorse au principe de moindre surprise.

Les évènements clavier « purs » sont keyup, keydown et keypress. keyup est émis pour toute action au clavier, ce qui inclut les touches spéciales comme ctrl. Dans le cas des combinaisons de touches telles que ctrl+V, plusieurs keyup sont émis (un pour ctrl et un pour V). L’action de coller elle-même émet en plus un évènement paste ; il remplace avantageusement une fonction keyup inutilement compliquée.

keydown est l’équivalent de keyup, sauf qu’il est émis en continu tant que la touche est enfoncée.

keypress est différent car il n’est émis que pour les touches correspondant à du texte. Le cas échéant, il est émis en même temps que keyup. Pour certaines touches ayant une « action » sur le texte (effacer, tab, entrée, etc.), les différents navigateurs ne sont pas cohérents entre eux : des fois keypress est émis, des fois pas. Si on veut gérer ces touches en particulier, il vaut mieux utiliser keyup et examiner le keyCode de l’évènement.

click peut être également considéré comme un évènement clavier car il est émis lorsqu’on active un élément, que ce soit avec espace ou entrée. Si la valeur d’un élément a changé, un change sera émis en même temps que blur lorsque tu passeras à l’élément suivant avec la touche tab.

Pour répondre à ta question, je pense que les évènements change et blur t’apporteront une solution. Pour la validation des champs de texte, keypress est sans doute mieux adapté que keyup, mais si on me demandait mon avis je dirais qu’il vaut mieux se contenter de change pour ne pas perturber l’utilisateur pendant qu’il saisit son texte. Ou alors une solution hybride avec un setTimeout pour ne valider que 500 ms (par exemple) après la dernière frappe.

Dans tous les cas, n’hésite pas à observer plusieurs évènements sur un même élément pour gérer à la fois les interactions souris et clavier

[Stev_k]

Bonsoir Watilin.
Merci bien. Je vais regarder tout ça et revenir ici au cas ou.

[Stev_k]

Me revoilà
Voici comment j'utilise onkeyup sur le champs pseudo par exemple:

Code html :

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

<input type="texte" name="pseudo" place holder="votre pseudo" onkeyup="vérifier_pseudo(this)"/>

Comme je l'ai dis dans mon premier post, le résultat me convient jusqu'à ce qu'on clique sur une proposition des différents pseudos enregistré par le navigateur : à ce moment, le message d'erreur ne disparait pas(veuillez choisir un pseudo). Le fait de remplacer onkeyup par onchange ou onkeypress n'y change rien.
Quant à la balise sélect, le code suivant ne fonctionne pas:

Code html :

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

1
2
3
<select name="villes" id="villes" onblur="verif_ville(this)">
<option ...
</select>

Pareil en remplaçant onblur par onchange.

Merci de m'aider à résoudre ce problème.

[Watilin]

Je ne m’étais jamais penché sur l’autocomplétion des champs de login par le navigateur. Je viens de faire des tests sous Firefox, et j’en suis arrivé à la conclusion qu’un change est émis sur le champ mot de passe mais pas sur le champ pseudo. Il faudra vérifier ce qu’il en est avec les autres navigateurs.

Quant au <select>, un change devrait suffire. Peut-être que le problème est dans ta fonction JS. Peux-tu me la montrer ?

[Stev_k]

"Bonjour" Watilin
Ma fonction verif_ville() :

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
 
function verif_ville(){
if(document.forms['formulaire_de_vente'].elements['ville'].value ==""){
 document.getElementById('erreur_ville').innerHTML='Choisissez votre ville';
 document.getElementById('ville').style.border="1px solid red";
 document.getElementById('erreur_ville').style.color="red";
 document.getElementById('erreur_ville').style.margin="5px";
 document.forms['formulaire_de_vente'].elements['ville'].style.backgroundColor ="#fba";
 window.top.window.scrollTo(670,670);
 return false;
 
}else{
  document.getElementById('erreur_ville').innerHTML='Good job body!';
 document.getElementById('ville').style.border="1px solid green";
 document.getElementById('erreur_ville').style.color="green";
}
}

Elle est sensiblement la même (syntaxe) pour tous les types de champs.