plug-in validation JQuery - point fort d'erreur problème

Question

J'ai un formulaire avec deux zones de texte entrée, et j'ai inclus des règles de validation jQuery pour les deux:

<script src="../../Scripts/jquery-validate/jquery.validate.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#respondForm').validate({ onclick: false, 
     onkeyup: false, 
     onfocusout: false, 
     highlight: function(element, errorClass) { 
     $(element).css({ backgroundColor: 'Red' }); 
     }, 
     errorLabelContainer: $("ul", $('div.error-container')), 
     wrapper: 'li', 
     rules: { 
     'text': { 
      required: true, 
      minlength: 5, 
      maxlength: 10 
     }, 
     integer: { 
      required: true, 
      range: [0, 90] 
     } 
     }, 
     messages: { 
     'text': { 
      required: "xxx_Required", 
      minlength: "XXX Should be greater than 5", 
      maxlength: "XXX Cannot be greater than 10" 
     }, 
     integer: { 
      required: "is required", 
      range: "is out of range: [0,90]" 
     } 
     } 
    }); 
    }); 
</script> 
</head> 
. 
. 
. 
<input type="text" id="text" name="text" />  
<br /> 
<input type="text" id="integer" name="integer" /> 
<br /> 
<input type="submit" name="submit" value="Submit" /> 
<br /> 

J'ai utilisé:

function(element, errorClass) { 
    $(element).css({ backgroundColor: 'Red' }); 
} 

pour mettre en évidence la contrôle d'erreur. Maintenant, le problème est que dans le scénario suivant, les deux zones de texte d'entrée restent en surbrillance (couleur de fond: rouge):

1. texte Entrée avec moins de 5 caractères dans la boîte de texte 1
2. zone de texte Laisser 2 blanc
3. cliquez sur envoyer
4. deux arrière-plan de zone de texte d'entrée sera changée en rouge (ce qui est correct)
5. entrez maintenant un texte qui a 6 caractères zone de texte 1 (entrée valide)
6. congé de zone de texte 2 vide
7. Appuyez sur Envoyer
8. La couleur d'arrière-plan des deux zones de texte reste rouge. Où comme l'attente est que la couleur de fond de la zone de texte 1 ne devrait pas être rouge

Comment puis-je résoudre ce problème?

Answer 1

trouvé la réponse, vous devez fournir une unhighlight, aussi bien.

Ajoute la classe d'erreur à la fois l'élément non valide et son étiquette

$(".selector").validate({ 
    highlight: function(element, errorClass) { 
    $(element).addClass(errorClass); 
    $(element.form).find("label[for=" + element.id + "]") 
        .addClass(errorClass); 
    }, 
    unhighlight: function(element, errorClass) { 
    $(element).removeClass(errorClass); 
    $(element.form).find("label[for=" + element.id + "]") 
        .removeClass(errorClass); 
    } 
}); 

More info

Answer 2

La fonction que vous avez utilisé pour mettre en évidence le contrôle d'erreur définit la propriété css backgroundColor à 'red' en utilisant la fonction jQuery.css(), qui met la règle dans l'attribut style sur l'élément. Si vous n'avez pas une autre fonction de rappel qui réinitialise l'arrière-plan sur l'élément à inherit à l'aide de la fonction jQuery.css() ou remplace ou supprime la règle dans la balise de style, la règle reste en place et l'élément de formulaire continue d'avoir un fond rouge. Ce que vous devez faire est de définir indirectement l'arrière-plan de l'élément de formulaire en lui appliquant une règle de classe CSS (L'argument errorClass de votre rappel doit-il être un nom de classe CSS à appliquer en cas d'erreur? Utiliser ça). De cette façon, lorsque le formulaire vous soumet pouvez facilement réinitialiser l'apparence de la forme et revalider:

$('#theForm .errorClassName').removeClass('errorClassName'); 
$('#theForm').validate();