使用jQuery验证并将类添加到Anscestor

我有以下表格：

<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>

结果是，.error类永远不会被添加。如果注释掉数组遍历函数，则会添加该类。基本上，我看到的是DOM更改、添加和删除span元素并没有被这段代码读取。我是否需要结合使用live（）或delegate（）来监视DOM更改

---

这里有一个JSFIDLE:

如果我正确理解了您需要为整组不正确的输入字段（标签等）使用特殊样式，那么这里是您的FIDLE- 我在验证器中添加了JS“淋浴错误”：

$(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"
        }

    });
});

---

谢谢你，阿尔迪斯！应该知道该怎么做。

$(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"
        }

    });
});