jquery中的errorClass验证插件？

Question

我在我的Web应用程序中使用jquery validate插件来验证表单的空白和其他简单验证.

我正在使用下面的代码为我的表单设置jquery validate插件,其中有一个erroClass选项,我已经定义了一个CSS类名authError,我想在错误消息上应用它,但它也将同一个类应用于INPUT框,我不想在INPUT框中应用它,只是想要它的错误信息.请检查并提供帮助.谢谢!

$("#frmSignin").validate({
    debug: false,
    errorClass: "authError",
    errorElement: "span",
    rules: {
        username: {
            required: true,
            minlength: 10
        },
        password: {
            required: true  
        }
    },
    messages: {
        username: {
            required: "Please enter your username"
        },
        password: {
            required: "Please enter your password"
        }
    }
});

Answer 1

谢谢,对于技巧家伙,但我通过仅使用jQuery代码找到了更好的方法.highlight在验证插件中有一个事件,当出现错误时调用该事件以突出显示错误字段,我只是在调用此事件时删除了类表单元素.

$("#frmSignin").validate({
    debug: false,
    errorClass: "authError",
    errorElement: "span",
    rules: {
        username: {
            required: true,
            minlength: 10
        },
        password: {
            required: true  
        }
    },
    messages: {
        username: {
            required: "Please enter your username"
        },
        password: {
            required: "Please enter your password"
        }
    },
    highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }
});

Answer 2

实际上你应该只为输入和span定义不同的类(span,因为errorElement设置为span,否则它将是label),而不是删除应用的类

例如

span.authError {color:red;}

input.authError {border:1px dotted red;}

而不只是.authError {}将被应用于输入和跨度

Answer 3

    $("#borrowerForm").validate({
        errorElement: 'span',
        errorElementClass: 'input-validation-error',
        errorClass: 'field-validation-error',
        errorPlacement: function(error, element) {},
        highlight: function(element, errorClass, validClass) {
            $(element).addClass(this.settings.errorElementClass).removeClass(errorClass);
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass(this.settings.errorElementClass).removeClass(errorClass);
        },
        onkeyup: false,
        errorPlacement: function (error, element) { error.insertAfter(element); }
    });