[AJAX] Autocomplétion et validation formulaire

Version imprimable

21/06/2009, 21h30
Benzz

[AJAX] Autocomplétion et validation formulaire

Bonjour,

J'utilise le script d'autocomplétion de Denis Cabasson pour sélectionner des villes, ce qui fonctionne à merveille. Je rencontre toutefois un problème assez ennuyeux.

Lorsque l'on sélectionne une valeur dans la liste de choix et qu'on tape la touche [Entrée], la valeur est certes placée dans le champs prévu à cet effet, mais le formulaire est aussi validé (submit).

Le problème, c'est que les utilisateurs de se formulaire doivent remplir plusieurs champs avant de valider le formulaire... Donc ma question est la suivante : comment éviter que le formulaire ne soit validé quand on tape sur la touche [Entrée] pour sélectionner une valeur de la liste de choix ?

Je vous remercie par avance de votre aide et je vous précise que j'ai déjà lu la discussion suivante sur le même sujet, mais dans laquelle aucune solution efficace n'a semble-t-il été apportée :
http://www.developpez.net/forums/d15...nt-onkeypress/
22/06/2009, 15h12
E.Bzz

Bonjour,

Citation:

Envoyé par Benzz

comment éviter que le formulaire ne soit validé quand on tape sur la touche [Entrée] pour sélectionner une valeur de la liste de choix ?

je comprends bien que tu essayes d'adapter ta page en fonction de tes utilisateurs.
Cependant, dans ce cas, je ne suis pas sûr que ça soit la meilleure solution.
Le validation par "Enter" du formulaire est le fonctionnement classique sur internet.
Il serait donc, à mon avis, largement préférable d'être un peu didactique envers tes utilisateurs : profites-en pour les sensibiliser au fonctionnement d'internet ;)

Si tu leur masques le problème par un script adapté pile-poil à leur fonctionnement actuel, ils auront toujours ce problème ailleurs (ex : validation à tort d'une commande sur un site marchand etc.).

Au lieu de ça, tu peux, par exemple adapter le message d'erreur (celui que tu affiches certainement si le formulaire est validé sans que tous les champs soient remplis). Il suffit d'ajouter à la fin un petit "RAPPEL : utiliser la touche TAB pour vous déplacer d'un champ à l'autre et la touche ENTER uniquement pour valider l'écran."
Il feront l'erreur encore 2 ou 3 fois chacun (sans conséquence fâcheuse) et puis ils auront compris :mrgreen:

EDIT : tout ça étant dit, le problème n'est pas lié à la présence d'un traitement Ajax dans la page ;)

A+
22/06/2009, 15h44
Benzz

Je te remercie de ta réponse, mais je ne suis pas certains que nous nous comprenions tout à fait. ;) Je souhaite effectivement adapter ma page aux visiteurs, pour une en améliorer l'ergonomie, mais uniquement sur les champs à autocomplétion.

Mon formulaire contient plusieurs champs à renseigner obligatoirement (saisie classique comme le nom par exemple), mais contient aussi deux champs à saisie autocomplétée via AJAX.

Je souhaite bien évidemment que l'utilisateur puisse valider son formulaire en tapant sur la touche [Entrée].

Le problème qui se pose avec le script de Denis Cabasson, c'est que lorsque la liste de choix AJAX s'affiche, si on sélectionne une valeur avec la souris, tout est ok. La valeur s'affiche dans le champs et on peut passer à la suite de la saisie. Par contre, si on fait défiler les valeurs avec les flèches directionnelles du clavier et qu'on sélectionne une valeur avec la touche [Entrée], la valeur s'affiche correctement dans le champ, mais aussitôt, le formulaire est validé, ce qui provoque bien entendu l'affichage d'un message indiquant à l'utilisateur qu'il doit encore compléter certains champs.

Etant donné que les évènements clavier sont récupérés et analysés quand on on se trouve dans le champs à autocomplétion, je souhaiterais simplement trouver l'endroit du javascript qui permettrait, quand on appuie sur la touche [Entrée] de simplement afficher la valeur correspondante dans le champ, mais sans que cela valide le formulaire.

En sommes, je souhaite que le comportement de la touche [Entrée] soit normal quand on se trouve sur un champ normal, mais ne serve qu'à sélectionner une valeur quand on se trouve sur un champ autocomplété.
22/06/2009, 16h07
E.Bzz

Citation:

Envoyé par Benzz

mais je ne suis pas certains que nous nous comprenions tout à fait. ;)

Si si :mouarf:
La touche à utiliser en standard pour sélectionner la ligne d'une liste est la touche TABULATION (après l'avoir sélectionner avec les flèches).

Si tu persévères néanmoins, tu as déjà la solution dans la discussion en lien (il y a visiblement uniquement un mauvais emploi de cancelbubble / stopPropagation qui bloque l'envoi du form => une petite recherche sur le sujet devrait le régler)

A+
22/06/2009, 16h14
Benzz

Arf désolé :lol:

Merci pour ta réponse, je vais donc chercher de ce coté là.

Si la touche tabulation permet officiellement de sélectionner une valeur dans une liste, j'ai l'impression que ce n'est pas le réflex des utilisateurs (certainement ignorant). Par conséquent, je vais peut être quand même adapter la page aux utilisateurs, car je pense que (dans une certaine mesure toutefois) c'est à la page de s'adapter à l'utilisateur et non l'inverse.

Si je trouve la solution à mon "problème", j'essaierai de penser à revenir la poster clairement ici. Merci encore à toi.

Donc son tutoriel, Denis gère les keyUp, ... Du coup, as tu essayé basiquement:

Code:

1
2
3
4
5
6
7
8
9
 
function stopEnter(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var cible = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  //on annule la touche entrée uniquement en cas de validation sur un input type=text
  if ((evt.keyCode == 13) && (cible.type=="text"))  {return false;}
}
 
document.onkeypress = stopEnter;

Cela le fait pour toutes les boites de texte du document, mais peut aussi s'appliquer à une seule.

ERE

23/06/2009, 17h25
Benzz

La fonction stopEnter permet effectivement de supprimer l'effet de la touche [Entrée], mais le problème, c'est que, du coup, elle ne permet plus de sélectionner le choix et de faire disparaitre la liste.

Merci quand même pour cette proposition.

Je ne comprend pas bien le complément de Denis dans l'autre discussion, par conséquent, je vais peut être laisser le script en l'état et indiquer sur ma page d'utiliser la touche tabulation (le problème, c'est que les gens ne lisent les instructions qu'en travers).

Merci encore de votre aide.
23/06/2009, 17h33
E.Bzz

Citation:

Envoyé par Benzz

(le problème, c'est que les gens ne lisent les instructions qu'en travers).

Sauf quand tu mets ça dans un message d'erreur bloquant qui les oblige à recommencer (comme suggéré) : tu verras, ils apprendront vite ;)

A+
24/06/2009, 11h19
emmanuel.remy

Citation:

La fonction stopEnter permet effectivement de supprimer l'effet de la touche [Entrée], mais le problème, c'est que, du coup, elle ne permet plus de sélectionner le choix et de faire disparaitre la liste.

Dans ce cas:

Code:

taZoneDeSaisie.onkeypress = stopEnter;

Non ?

ERE