Jquery Validation - claire boîte de message d'erreur lors de la saisie a été corrigé

Je suis en utilisant jquery validation plus le plugin à partir de bassistance.de, les erreurs de validation sont présentés dans une zone spécifique de l'écran et non pas en plus de l'élément de formulaire non valide ceci est réalisé par la spécification d'un vide errorPlacement fonction de la validité de la méthode.

<div id="errbox" style="display: none"></div><br />
<form id="myform" method="post" action="#">
 <fieldset>
    <legend>1. Personal Details</legend>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName" size="30" required /> 
    <br /><br />
    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName" size="30" required />
 </fieldset>
 <br />
 <input type="submit" value="Go" />            
</form>

Je voudrais que les messages d'erreur à disparaître/clair à chaque fois que l'entrée a été corrigé et c'est valable contre les règles de validation. Ce qui se passe si je sors de l'errorPlacement code et de laisser le message apparaissant en plus de l'élément non valide, mais il ne fait pas si je montre les messages d'erreur dans la case prévue à cet effet.

C'est mon code js

$("#myform").validate({
 messages: {
    firstName: {required: "Please enter your First Name"},
    lastName: {required: "Please enter your last name -
                          your maiden name if married"},
 },
 invalidHandler: function(form, validator) {
 //This handler will show only one error at time - the first in this instance //
       var errors = validator.numberOfInvalids();
       if (errors) {
             $("#errbox").html(validator.errorList[0].message);
             $("#errbox").show();
             validator.errorList[0].element.focus();
        } else {
             $("#errbox").hide();
        }
 },       
 errorPlacement: function(error, element) {
            //Override error placement to not show error messages beside elements //
 },    
});

Vous pouvez essayer le code ici: http://jsfiddle.net/E7yPf/

J'ai essayé de déclarer explicitement le onKeyUp et onFocusOut propriété et vrai, mais il n'a eu aucun effet.

Est-il quelqu'un ici qui peut aider ou me diriger dans la bonne direction?

Grâce

pourquoi vous ne pouvez utiliser jquery persil il est plus facile et nous pouvons avoir le contrôle dans nos mains
Merci de ne pas "marquer comme spam". La jquery-validation-engine est complètement différent plugin.

InformationsquelleAutor TomTom | 2014-02-14

jquery jquery-validate

4

Vous comprenez mal le invalidHandler de rappel. Selon la documentation, il se déclenche uniquement sur soumettre cliquez sur lorsque le formulaire est "invalide". En d'autres termes, votre if (errors) conditionnelle ne peut jamais être vu quand il n'y a pas d'erreurs de sorte que le else hide() ne peut jamais être appelée.

Mettre hide() à l'intérieur de la success de callback qui est déclenché à chaque fois qu'un champ de passe de validation. Cependant, ce qui les expose à un défaut dans votre invalidHandler la logique, où vous ne verrez pas les autres messages d'erreur une fois que la première est effacée. Je ne sais pas si c'est la meilleure chose à faire, mais c'est ce que de vos commentaires indiquent que vous voulez. Vous pouvez les ajuster au besoin.
```
$("#myform").validate({
    messages: {
        firstName: {
            required: "Please enter your First Name"
        },
        lastName: {
            required: "Please enter your last name - your maiden name if married"
        } //<- removed a trailing comma
    },
    invalidHandler: function (form, validator) {
        //This handler will show only one error at time - the first in this instance //
        var errors = validator.numberOfInvalids();
        $("#errbox").html(validator.errorList[0].message);
        $("#errbox").show();
        validator.errorList[0].element.focus();
    },
    success: function () {
        $("#errbox").hide();
    },
    errorPlacement: function (error, element) {  //<- do not leave empty
        return false;  
    } //<- removed a trailing comma
});
```
DÉMO: http://jsfiddle.net/pwgRC/

Quelques remarques:

1) Ce plugin a été testé uniquement avec la version 1.9 de jQuery, cependant, votre jsFiddle est à l'aide de jQuery version 1.11.0. Pas de problèmes connus, mais de procéder avec prudence.

2) Vous ne peut pas ensemble onkeyup ou onfocusout à true. Selon la documentation, c'est une sélection non valide comme c'est déjà le comportement par défaut. J'ai vu true briser ce plugin. Utilisez uniquement false ou un cheval de fonction.

3) Ne laissez pas une fonction vide. Si vous souhaitez désactiver le errorPlacement fonction de rappel, il suffit de placer un return false à l'intérieur.

4) j'ai enlevé un peu de virgules. Surtout un problème technique dans les anciennes versions d'Internet Explorer, mais IMO, c'est bâclée de programmation.

Alternative:

À l'aide de la errorContainer: "#errbox" option améliore la fonctionnalité tout à fait un peu. Vous pouvez alors retirer votre show/hide code et votre success option, car errorContainer gère automatiquement ces fonctions.

Alternative DÉMO: http://jsfiddle.net/pwgRC/1/

Puis en utilisant les errorLabelContainer et wrapper options, vous pouvez vous débarrasser de votre invalidHandler et errorPlacement fonctions. (Toutes les erreurs sont affichés à la place de la première, mais je voulais vous faire voir que ces options sont disponibles.)

Alternative DÉMO 2: http://jsfiddle.net/pwgRC/2/

Je suggère que vous lire la documentation de sorte que vous pouvez décider de la meilleure pour vous-même.

InformationsquelleAutor Sparky

Je pense que le code suivant fonctionner comme vous le souhaitez:

<span id="errbox"></span>
<form id="myform" method="post" action="#">
<fieldset>
    <legend>1. Personal Details</legend>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName" size="30" required /> 
    <br /><br />
    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName" size="30" required />
</fieldset>
<br />
<input type="submit" value="Go" />            
</form>



$("#myform").validate({
    errorClass: 'validation-error',
    errorContainer:'#errbox',
    messages: {
        firstName: {required: "Please enter your First Name"},
        lastName: {required: "Please enter your last name - your maiden name if married"},
 },
 invalidHandler: function(form, validator) {
           //This handler will show only one error at time - the first in this instance //
     //      var errors = validator.numberOfInvalids();
       //if (errors) {
             //$("#errbox").html(validator.errorList[0].message);
             //$("#errbox").show();
             //validator.errorList[0].element.focus();
        //} else {
          //  $("#errbox").html('');
        //}
  },       
  errorPlacement: function(error, element) {
               $("#errbox").html(error);
  },    
 });

 label.error {padding-left: .3em; color: #f00;}
 input.error {border: 1px solid #a00}
 .validation-error {border: 1px solid #f00; background-color: #fef1ec}

Toutefois vous pouvez suivre les docs que vous avez besoin de quelque chose d'autre: Jquery valider

InformationsquelleAutor alessandro

Vous devez vous connecter pour publier un commentaire.