Javascript jquery验证插件中的errorClass？

errorClass in jquery validate plugin?

提问by Prashant

I am using jquery validateplugin in my web application to validate forms for blank and other simple validations.

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

I am using below code to setup jquery validate plugin for my form, there is a erroClassoption in it, where I have defined a CSS class name authErrorwhich I want to apply on error messages, but its applying the same class to INPUT box as well, I don't want to apply it in INPUT box, just want it for error message. Please check and help. Thanks!

我正在使用下面的代码为我的表单设置 jquery 验证插件，其中有一个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"
        }
    }
});

回答by Prashant

Thanks, for the tricks guys, but I instead found a better way by using the jQuery code only. There is a highlightevent in validate plugin which is called when error occurred to highlight the error fields, I just removed the class form element when this event is called.

谢谢你的技巧，但我只通过使用 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);
    }
});

回答by fozylet

You should actually be just defining different classes for input and span (spansince errorElement is set to span, otherwise it will be label), rather than removing the applied class

您实际上应该只是为 input 和 span 定义不同的类（span因为 errorElement 设置为 span，否则它将是label），而不是删除应用的类

e.g.

例如

span.authError {color:red;}

span.authError {颜色：红色；}

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

input.authError {边框：1px 红色虚线；}

and not just .authError{}which will get applied to both input and span

而不仅仅是.authError{}将同时应用于输入和跨度

回答by Alexander

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

回答by Frédéric Hamidi

In the jQuery validation plugin, the errorClassis both applied to the error message element (usually a <label>, but a <span>in your case) andto the validated element itself. Since you only want to style the error message element, you should write:

在 jQuery 验证插件中， theerrorClass既应用于错误消息元素（通常是 a <label>，但<span>在您的情况下是 a ）和已验证元素本身。由于您只想设置错误消息元素的样式，因此您应该编写：

span.authError {
    // Your error element style.
}

回答by Vivek Goel

If you want to give css for the error message. Then in place of using errorClass define css rule

如果您想为错误消息提供 css。然后代替使用 errorClass 定义 css 规则

label.error 

回答by Elshan

Check this:

检查这个：

jQuery.validator.messages.required = "";
$('#frm-contact').validate({
    invalidHandler: function (e, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
                    ? 'You missed 1 field. It has been highlighted below'
                    : 'You missed ' + errors + ' fields.  They have been highlighted below';
            $("div.error span").html(message);
            $("div.error").show();
        } else {
            $("div.error").hide();
        }
    },
    onkeyup: false,
    submitHandler: function () {
        $("div.error").hide();
        alert("submit! use link below to go to the other step");
    },
    highlight: function (element, required) {
        $(element).fadeOut(function () {
            $(element).fadeIn();
            $(element).css('border', '2px solid #FDADAF');
        });
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).css('border', '1px solid #CCC');
    }
});