Attribut de validation MVC personnalisé et problème de format bootstrap

Question

J'utilise ASP.net MVC avec le bootstrap de Twitter.

J'ai ajouté ce qui suit pour obtenir les champs avec des erreurs de style correctement dans bootstrap

$.validator.setDefaults({ 
    highlight: function (element) { 
     $(element).closest(".control-group").addClass("error"); 
    }, 
    unhighlight: function (element) { 
     $(element).closest(".control-group").removeClass("error"); 
    } 
}); 

Cela fonctionne très bien avec toute validation, sauf validations personnalisés attributs. Le validateur personnalisé que j'ai créé vérifie si une case à cocher est cochée, sinon il s'attend à ce que quelque chose soit entré dans un champ de texte. Ceci est juste un exemple, mais d'autres attributs de validation personnalisés que j'ai créés échouent de la même manière que décrit ci-dessous.

Si je soumets la forme, toutes les erreurs sont décorées de façon appropriée, sauf pour le champ avec mon validateur personnalisé. Cependant, je sais que le validateur a fonctionné parce que le message d'erreur est apparu, mais le message et le champ sont noirs au lieu de rouge.

Si je saisis du texte dans le champ pour satisfaire le validateur, le message d'erreur disparaît. Ensuite, si je supprime ce texte, le message d'erreur retourne et tout est stylé en rouge comme il se doit.

Alors, si je soumets à nouveau le formulaire, le style rouge disparaît, même si l'erreur persiste, mais seulement pour le champ avec le validateur personnalisé, tous les autres erreurs restent rouge.

sur Envoi de formulaire, les valeurs par défaut I jeu (ci-dessus) ne sont pas exécutés pour le champ avec le validateur personnalisé, mais les valeurs par défaut sont exploités pour tout le reste.

Pourtant, avec le flou sur et la clé des événements sur le terrain avec le validateur personnalisé, tout se comporte comme prévu et tous les travaux de style comme prévu.

Je ne sais plus quoi regarder. Toute aide/direction est appréciée.

Answer 1

J'ai eu la même question récemment jusqu'à ce que je trouve que j'avais entrées valides et non valides dans le même .control-group. (<input type="hidden"> champs dans mon cas). Si cela s'applique à votre cas aussi, vous pouvez utiliser le errorClass fourni par les highlight et unhighlight méthodes comme celle-ci:

function highlight(element, errorClass, validClass) { 
    $(element) 
     .addClass(errorClass) 
     .closest(".control-group") 
     .addClass("error"); 
}; 

function unhighlight(element, errorClass, validClass) { 
    var c = $(element) 
     .removeClass(errorClass) 
     .closest(".control-group"); 
    // make sure not to remove parent container error class, 
    //if there is still an invalid input field inside 
    if (c.find("." + errorClass).length < 1) 
     c.removeClass("error"); 
};