Using jQuery Validate and adding class to Anscestor

Question

I have this form:

<form id="consult-form">
    <div class="group">
        <label for="pfname">First Name<span>*</span></label>
        <div class="input">
            <input class="large required" type="input" id="pfname" name="pfname" size="30" />
        </div>
    </div>

    <div class="group">
       <label for="plname">Last Name<span>*</span></label>
       <div class="input">
           <input class="xlarge required" type="input" id="plname" name="plname" size="30" />
       </div>
    </div>

    <div class="group">
        <label for="pphone">Phone<span>*</span></label>
        <div class="input">
            <input class="large required" type="tel" id="pphone" name="pphone" size="30" />
        </div>
    </div>
</form>

I'm using jQuery Validation to validate these three fields. I've been able to get the core functionality of the plugin to work fine. What I'm trying to do is add a class of '.error' to the containing div.group for each specific input field.

I'll show you what I have so far:

$(function(){

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-inline"
});

$('#consult-form').validate({

    invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                    $required = $('input.required');
                    $required.parents('div.group').removeClass('error');

                    $required.each(function(index){
                        if ($(this).parent().has('span')) {
                            console.log(index+' is true');
                            $(this).parents('div.group').addClass('error');
                        }
                    });
                }
            },

    messages: {
        pfname: "Please enter your first name",
        plname: "Please enter your last name",
        pphone: "We need your phone number"
    }

});
});

The result is that I'm getting is that the '.error' class is never getting added. If I comment out the array traversing function, the class gets added. Basically what I'm seeing is that the DOM changes, adding and removing the span elements, aren't being read by this bit of code. Do I need to use something like this with a combination of live() or delegate() to monitor DOM changes?

Here's a jsFiddle: http://jsfiddle.net/ToddSmithSalter/ueNZ4/1/

Answer 1

If I understood correctly that you need special style for whole group of incorrect input field (label, etc), then here is the fork of your fiddle - http://jsfiddle.net/aldis/3A7tV/1/ I added JS "showErrors" in validator:

$(function(){
    $.validator.setDefaults({
        errorElement: "span",
        errorClass: "help-inline"
    });
    $('#consult-form').validate({
        showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
            $('.error').removeClass('error');
            $('input.help-inline').parent().parent().addClass('error');
        },        
        invalidHandler: function(form, validator) {
                    var errors = validator.numberOfInvalids();
                    if (errors) {
                        $required = $('input.required');
                        $required.each(function(index){
                            if ($(this).parent().has('span')) {
                                console.log(index+' is true');
                            }
                        });
                    }
                },
        messages: {
            pfname: "Please enter your first name",
            plname: "Please enter your last name",
            pphone: "We need your phone number"
        }

    });
});