0

我有这个表格：

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

我正在使用jQuery Validation来验证这三个字段。我已经能够让插件的核心功能正常工作。我想要做的是为每个特定的输入字段添加一个“.error”类到包含的 div.group 中。

我将向您展示我到目前为止所拥有的：

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

});
});

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

这是一个 jsFiddle：http: //jsfiddle.net/ToddSmithSalter/ueNZ4/1/

4

1 回答 1

0

如果我理解正确，您需要为整组不正确的输入字段（标签等）提供特殊样式，那么这是您的小提琴的分支 - http://jsfiddle.net/aldis/3A7tV/1/ 我添加了 JS“showErrors " 在验证器中：

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

    });
});
于 2011-10-14T21:56:56.203 回答