jquery validate: focusCleanup: true et focusInvalid: false ne fonctionnent pas comme prévu

J’utilise le plugin de validation jquery 1.6 de Joern.

Mon objective consiste à adopter le comportement suivant: supprimer le message d’erreur d’un élément une fois que l’utilisateur le focalise. D’après ce que j’ai compris, la définition de ‘focusCleanup: true’ devrait en tenir compte.

Cependant (du moins sur mon navigateur (Firefox 3.5.7 sous Linux)), je n’obtiens que le comportement souhaité (message d’erreur pour un champ qui disparaît une fois la mise au point effectuée) si je clique dessus ; il ne gère pas correctement la tabulation dans le champ.

Exemple de code:

HTML:

JS:

  $("#abc").validate({ focusCleanup: true, focusInvalid: false, rules: {t1: {required: true, email:true}, t2: {required: true,email:true}} });

Je mets ‘focusInvalid: false’ car la documentation dit qu’il faut éviter de combiner focusCleanup et focusInvalid; dans mon expérience commentant cette ligne ne fait aucune différence.

Est-ce que je fais quelque chose de mal?

Ce que vous expérimentez, c’est le comportement correct, juste peut-être un peu contre-intuitif. Vous pouvez voir votre code dans une démonstration ici . Lorsque vous cliquez sur, vous vous concentrez uniquement sur la zone de texte. Toutefois, lorsque vous effectuez un onglet, vous focusin 2 événements importants, vous déclenchez la mise au focusin et la keyup .

Depuis que vous déclenchez le keyup ce qui est en train de se passer keyup l’erreur, mais parce que vous tapez quelque chose dans leur boîte (cela ne distingue pas l’onglet de toute autre touche, comme une lettre) … évaluer si la boîte est valide sur chaque keyup et afficher la même erreur qu’auparavant puisque l’onglet n’avait aucun effet sur cela … puisqu’il keyup aucun texte.

Si vous voulez désactiver la validation onkeyup cela cessera, comme ceci:

 $("#abc").validate({ focusCleanup: true, rules: {t1: {required: true, email:true}, t2: {required: true,email:true}}, onkeyup: false, });

Pour comparaison, voici ce code dans une démo , vous pouvez donc le comparer à la démo originale ci-dessus.