Vérification instantanée formulaire côté client

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

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.

:arrow: 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.

:arrow: 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 ;)

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

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

Code:

---

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

---

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.

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 ?

"Bonjour" Watilin ;)
Ma fonction verif_ville() :

Code:

---

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.

Je vois un problème de « s » : il y a « villes » dans ton html, mais « ville » dans ton script. Ça vient sans doute de là ;)

Bonjour Watilin
😢 ça ne fonctionne toujours pas.

Bonjour,

comme je ne suis pas sûr d’avoir compris exactement ce que tu veux faire, je te donne ma page de test, elle te permettra de voir en détail la séquence d’évènements quand tu interagis avec un formulaire. Je te conseille de mettre ta console en mode persistant pour que les logs ne s’effacent pas quand tu soumets le formulaire, et de la basculer en panneau latéral pour avoir plus d’informations sous les yeux en même temps.

J’ai fait mes tests avec Firefox et Chrome sous Windows 7.

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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Test évènements formulaire</title> <style>   label { display: inline-block; margin-right: 1ex; } label * { display: block; }   </style> </head> <body>   <form> <p> <label> Pseudo <input type="text" name="pseudo" value="" /> </label> <label> Mot de passe <input type="password" name="password" value="" /> </label> </p> <p> <label> Zone de texte <textarea name="textarea"></textarea> </label> </p> <p> <label> Radio A <input type="radio" name="radio" value="A" checked /> </label> <label> Radio B <input type="radio" name="radio" value="B" /> </label> </p> <p> <label> Case A <input type="checkbox" name="checkbox[]" value="A" /> </label> <label> Case B <input type="checkbox" name="checkbox[]" value="B" /> </label> <label> Case C <input type="checkbox" name="checkbox[]" value="C" /> </label> </p> <p> <label> Select <select name="select"> <option value="A"> option A </option> <option value="B"> option B </option> </select> </label> </p> <p> <input type="submit" /> </form>   <script> 'use strict';   function logEvent(event) { console.log(event, event.type); console.log('^', this); if ('blur' === event.type) console.log('---'); }   let eventNames = [ 'click', 'focus', 'blur', 'change', 'keyup', 'keypress', 'keydown', 'cut', 'copy', 'paste' ];   for (let $field of document.querySelectorAll('input, textarea, select')) { for (let eventName of eventNames) { $field.addEventListener(eventName, logEvent); } }   document.querySelector('form').addEventListener('submit', logEvent);   </script> </body> </html>

---

J’ai pu observer que sous Chrome, aucun évènement n’est émis lorsque tu « autocomplètes » les champs pseudo / mot de passe. C’est un problème ennuyeux. La seule solution qui me vient à l’esprit sur le moment, c’est d’appeler la fonction qui vérifie ces champs à intervalles réguliers avec setTimeout ou setInterval. Par exemple :

Code:

---

setInterval(vérifier_pseudo, 500); // 500 ms = 0.5 s

---

Attention : j’ai recopié tel quel le « é » de ta fonction, je ne sais pas s’il est présent à la base dans ton code, ou si tu as été victime d’un correcteur automatique trop zélé :P

Bonjour Watilin et merci pour tout 🙏.
Je vais regarder tout ça et vous faire mon rapport ...😁
La présence du <<é>> est bel et bien dû au correcteur automatique. Vous l'aurez remarqué, je poste la plupart du temps depuis mon téléphone.
Encore merci.