CODEWITHSUNDEEP
javascriptjqueryvalidation
djmzfKnm
djmzfKnm

Reputation: 27185

errorClass in jquery validate plugin?

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

I am using below code to setup jquery validate plugin for my form, there is a erroClass option in it, where I have defined a CSS class name authError which 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!

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

Upvotes: 26

Views: 55129

Answers (6)

Elshan
Elshan

Reputation: 7693

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');
    }
});

Upvotes: 0

Alexander
Alexander

Reputation: 1263

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

Upvotes: 5

Frédéric Hamidi
Frédéric Hamidi

Reputation: 262949

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

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

Upvotes: 2

fozylet
fozylet

Reputation: 1289

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

e.g.

span.authError {color:red;}

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

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

Upvotes: 5

djmzfKnm
djmzfKnm

Reputation: 27185

Thanks, for the tricks guys, but I instead found a better way by using the jQuery code only. There is a highlight event 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. 

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

Upvotes: 34

Vivek Goel
Vivek Goel

Reputation: 24150

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

label.error

Upvotes: 0

Related Questions