Plugin JQuery validation - error mettre en lumière les problèmes
J'ai un formulaire avec deux zones de saisie de texte, et j'ai inclus jQuery règles de validation 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 le contrôle d'erreur. Maintenant, le problème est que dans le scénario suivant, les deux zones de saisie de texte mise en surbrillance en arrière-plan (couleur: rouge):
- De saisie de texte avec moins de 5 caractères dans la zone de texte 1
- Laisser 2 de zone de texte vide
- Cliquez sur envoyer
- À la fois d'entrée de la zone de texte d'arrière-plan sera changé en rouge (qui est correcte)
- Maintenant entrer un texte qui a 6 caractères dans la zone de texte 1 (entrée valide)
- Laisser 2 de zone de texte vide
- Cliquez sur envoyer
- La couleur d'arrière-plan pour les deux zones de texte reste en rouge. Où, comme on s'attend à ce que la couleur d'arrière-plan de la zone de texte 1 ne doit pas être rouge
Comment puis-je résoudre ce problème?
OriginalL'auteur Ngm | 2009-11-10
Vous devez vous connecter pour publier un commentaire.
Trouvé la réponse, vous devez fournir un
unhighlight
bien ainsi.Ajoute l'erreur de classe à la fois à l'élément non valide et son étiquette
Plus d'infos
OriginalL'auteur Ngm
La fonction que vous avez utilisé pour mettre en évidence le contrôle d'erreur définit la propriété css
backgroundColor
à'red'
à l'aide de lajQuery.css()
fonction, qui pose la règle de lastyle
l'attribut de l'élément. Si vous n'avez pas d'autre fonction de callback qui rétablit l'arrière-plan sur l'élément àinherit
à l'aide de lajQuery.css()
fonction, ou autrement remplacements/supprime la règle dans la balise style, alors la règle rester en place et la forme de l'élément continuera d'avoir un arrière-plan rouge.Ce que vous devez vraiment faire est de définir l'arrière-plan d'un élément de formulaire, indirectement, par l'application d'une classe css à la règle (il Est le
errorClass
argument de votre rappel censé être un d'un nom de classe css à appliquer en cas d'erreur? J'ai ce cas, vous devez l'utiliser). De cette façon, lorsque le formulaire soumet vous pouvez facilement réinitialiser l'aspect de la forme et de revalider:OriginalL'auteur Ryan Lynch