jQuery Validate - Erreur d'Ajout de la Classe de Div Parent

Je suis à l'aide de jQuery Valider plugin, et ne peut jamais trouver un bon moyen pour afficher les erreurs des cases à cocher. Je tiens à souligner l'ensemble de la case des étiquettes en rouge si aucune n'est sélectionnée, et décidez de le faire par l'ajout d'une classe d'erreur à la div qui contient les cases à cocher et de la case des étiquettes. Cependant, il ne semble pas être l'ajout de la classe. Je ne suis pas à la sélection de la div correctement?

HTML:

<div class="left-aligned indent">

    <label id="id_label" for="id" class="label">Items:</label>

    <div class="select-group">

        <input type="checkbox" name="items" value="1" id="item_1" />
        <label class="checkbox">Item #1</label><br />

        <input type="checkbox" name="items" value="1" id="item_2" />
        <label class="checkbox">Item #2</label><br />

        <input type="checkbox" name="items" value="1" id="item_3" />
        <label class="checkbox">Item #3</label><br />

    </div>

</div>

Javascript:

$().ready(function() {

    $('#addForm').validate({
        rules: { 
            "items": { 
                required: true, 
                minlength: 1 
            } 
        }, 
        errorPlacement: function(error, element) {
            if (element.is(':checkbox')) {
                $(this).prev("div").addClass('checkbox-error');
            }
            else {
                 return true;
            }
         }
    }); 


});

CSS:

.error {
    background-color: #FF898D;
    border: 1px solid #000;
}

.checkbox-error {
    color: #FF898D;
}

OriginalL'auteur Michael | 2011-10-29

  1. 8
    $(element).parent('div').addClass('checkbox-error');
    Ne semble pas encore être au travail. Quand je vérifie dans Firebug, il ajoute class="erreur" à la première case.
    Il a obtenu, " il "devrait être "élément" $(element).parent('div').addClass('checkbox-error');
    Ahhh, mais maintenant, quand une case est cochée, la classe n'est pas supprimé, et il reste en rouge. Comment puis-je supprimer une classe à partir de la div une fois qu'une case est cochée?
    Je pense que stackoverflow.com/a/17211258/923785 devrait être accepté réponse - le au-dessus des feuilles de l'erreur de classe derrière après que le champ a été modifiée pour valides.
    Message personnalisé sont supprimés si je utiliser le script ci-dessus

    OriginalL'auteur

  2. 38

    Cela devrait fonctionner:

        $('#myform').validate({
    highlight: function(element) {
        $(element).parent().addClass("field-error");
    },
    unhighlight: function(element) {
        $(element).parent().removeClass("field-error");
    }
    });

    La caisse de la documentation pour plus d'options:

    C'est ce dont j'avais besoin, merci!
    Cela devrait vraiment être la accepté de répondre - ce qui garantit la classe personnalisée est appliqué et retiré à chaque fois que l'état de validation des modifications. La accepté de répondre, va quitter la classe d'erreur de derrière, même une fois que le champ a été modifiée pour être validé (mis en évidence ici stackoverflow.com/questions/7941662/...)

    OriginalL'auteur Luis Evrythng