web-dev-qa-db-fra.com

Utilisation du plug-in de validation jQuery: onfocusout, onkeyup ne fonctionne pas comme prévu sur le site de production

J'utilise jQuery Validate plugin v.1.9.0 cela fonctionne très bien. Mais je suis confronté à ce problème, une fois que l'utilisateur a soumis le formulaire et s'il y a des erreurs, il affiche correctement le message d'erreur. Le problème est qu'il ne met pas à jour le message si l'utilisateur prend des mesures pour remédier à cette erreur. Par exemple. si un champ est requis, lors de la première réception du message, l'utilisateur commence à taper, ce message doit alors disparaître. 

Dans la documentation, il est mentionné que onfocusout & onkeyup sont utilisés à cette fin et par défaut, ils sont définis sur true. La chose amusante est que cela semble fonctionner sur mon poste de travail local, mais cela échoue (en silence) une fois que je télécharge mon code sur le site de production. Je pensais que je le bousculais royalement d'une façon ou d'une autre, alors j'ai lancéjsfiddle et mis le code pertinentpour voir si cela se produisait là aussi.

J'ai été étonné de voir que cela se passe là aussi. Ma question est donc la suivante: pourquoi fonctionne-t-il sur ma machine locale mais pas sur les sites de production?

P.S. Exemple autonome sur http://jsfiddle.net/tankchintan/cge44/5/

UPDATE

Pour reproduire le problème, faites -

  1. Aller à la page jsfiddle.
  2. Sans remplir les champs, soumettez le formulaire.
  3. Il affichera un message d'erreur à côté de chaque champ.
  4. Maintenant, commencez à taper dans l’un des champs.
  5. Vous remarquerez que le message d'erreur ne disparaît pas, même si la règle est satisfaite. Sur mon ordinateur local, l'erreur mesaage disparaît une fois que je tape quelque chose sur le terrain.
javascriptjqueryjquery-pluginsjquery-validatevalidation
17
Chantz

Ce problème existe même dans certains exemples du site Web de JQuery.

J'ai trouvé que le problème se produit lorsque l'élément d'entrée n'a pas de type. Les navigateurs Web supposent que le type est "text" s'il n'est pas spécifié, mais jquery.validate a un problème avec cela. Votre élément d'entrée devrait ressembler à ceci:

<input id="cname" name="name" type="text" class="required" minlength="2" />
16
nuander

Utilisez ceci à la place!

onkeyup: function(element) { $(element).valid(); },
onfocusout: function(element) { $(element).valid(); },
28
user1893029

Apparemment, cela ne fonctionne pas si votre bibliothèque jQuery est trop nouvelle. Je vivais la même chose, revenir de jquery v1.7.2 à v1.3.2 corrigeait le problème. 

La page d'exemple à http://jquery.bassistance.de/validate/demo/ utilise la version 1.3.2, mais je ne suis pas sûr de la version spécifique de jquery dans laquelle cette rupture s'est produite.

2
Sam Barnum

Ce qui suit fonctionne pour moi:

$(document).ready(function () {
        $("#myFormElement").submit(function (event) {
            var validator = $.data($('form')[0], 'validator');
            validator.settings.onfocusout = function (element) { $(element).valid(); };
            validator.settings.onkeyup = function (element) { $(element).valid(); };
        });

        var validator = $.data($('form')[0], 'validator');
        validator.settings.onfocusout = false;
        validator.settings.onkeyup = false;
    });

Cela désactive la validation initiale onkeyup. Si l'utilisateur clique ensuite sur Soumettre, nous réactivons la validation afin qu'une fois le champ valide, il reçoive un retour immédiat.

Je ne sais pas pourquoi ces propriétés sont initialement booléennes, puis rappelées par l'événement submit. J'ai trouvé la méthode uniquement en définissant les propriétés sur true dans l'événement submit, ce qui a provoqué une exception dans la bibliothèque de validation (tentative de la fonction d'appel).

2
mixja

Je pense que le comportement par défaut consiste à masquer ce message uniquement lorsque le champ est validé, par exemple. "Veuillez saisir une adresse électronique valide" disparaît après la saisie de "[email protected]", ce qui est logique, à mon avis.

Voir les démos: http://jquery.bassistance.de/validate/demo/

Je pense que vous essayez peut-être de faire quelque chose de similaire à ceci: jquery valide: focusCleanup: true et focusInvalid: false ne fonctionne pas comme prévu

0
agtb