jQuery-Validate - Add Error-Klasse Parent-Div

Ich bin mit dem jQuery Validate plugin, und finde nie ein guter Weg, um Fehler anzuzeigen, die für die Checkboxen. Ich möchte markieren Sie das Kontrollkästchen Beschriftungen in rot, wenn keine ausgewählt sind, und entscheiden, tun Sie dies, indem Sie eine error-Klasse für das div enthält die Checkboxen und checkbox-Etiketten. Jedoch, es scheint nicht zu sein indem die Klasse. Bin ich nicht auswählen das div korrekt?

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;
}
InformationsquelleAutor Michael | 2011-10-29
Schreibe einen Kommentar