jquery验证插件自定义错误类分配给父div答案

【问题标题】：jquery validate plugin custom error class assigned to parent divjquery验证插件自定义错误类分配给父div
【发布时间】：2016-05-29 21:26:33
【问题描述】：

我有一个使用 jQuery 验证插件验证的表单。

这是我用于验证的 jQuery 代码：

$('#authForm').validate({
                rules: {
                    Email: {
                        required: true,
                        email: true
                    },
                    Password: {
                        required: true
                    },
                    PasswordAgain: {
                        equalTo: "#Password"
                    },
                    Name: {
                        required: true
                    }
                },
                errorClass: "invalid",
                errorPlacement: function(error, element) { }
            });

我添加了一个需要附加到父 div 的 errorClass，而不是输入字段：

其中一个字段的 HTML 结构如下：

<div class="form-group form-group-custom ">
    <label>Email Address</label>
    <input name="Email" type="text" class="form-control invalid" value="test@test.com" aria-required="true" aria-describedby="Email-error" aria-invalid="true">
</div>

如果您注意到“invalid”类已附加到实际上正确的输入元素，但我需要将其附加到我的<div class="form-group form-group-custom"> 并在验证正常时将其删除。

【问题讨论】：

标签： jquery jquery-validate

【解决方案1】：

highlight 和 unhighlight 函数总是用于在事情变为有效/无效时应用/删除任何类。只需编写 target your parent div 的自定义 jQuery DOM 遍历函数。

$('#authForm').validate({
    rules: {
        ....
    },
    ....
    highlight: function(element, errorClass, validClass) {
        $(element).parent('div').addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).parent('div').addClass(validClass).removeClass(errorClass);
    },
    ....

如果类需要与插件自动应用的类完全分离，那么不要使用代表预设类的关键字，而是使用不同的类重命名。

    highlight: function(element, errorClass, validClass) {
        $(element).parent('div').addClass('myerrorclass').removeClass('myvalidclass');
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).parent('div').addClass('myvalidclass').removeClass('myerrorclass');
    },

【讨论】：