jQuery Validation plugin - how to change css on error

Question

I am following the demo over here

http://jquery.bassistance.de/validate/demo/marketo/

On submitting the form, if the field is empty, how are the input boxes and other fields getting that red border around them? What is it I have to add in my plugin decleration to get that?

Update

$("#profile_form").validate({
        rules: {
            nickname: "required",
            address: "required"
        },
        messages: {
            nickname: "(required)",
            address: "&nbsp;(required)"
        }
    });

I know how to get the border via css, I need to know how is the validate plugin changing the css.

Regards

vikmalhotra · Accepted Answer · 2010-10-25 02:46:49Z

15

This is how I accomplished what I was looking for...

$("#profile_form").validate({
        rules: {
            nickname: "required",
            address: "required"
        },
        messages: {
            nickname: "(required)",
            address: "&nbsp;(required)"
        }, highlight: function(element) {
            $(element).addClass('error');
        }, unhighlight: function(element) {
            $(element).removeClass('error');
        }
    });

Using the highlight and unhighlight options in the jquery.validate plugin does the trick.

answered Oct 25, 2010 at 2:46

vikmalhotra

10.1k20 gold badges100 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

alex · Accepted Answer · 2010-10-25 02:24:56Z

8

Something like this will do it...

CSS

input.error,
select.error,
textarea.error {
    border: 3px solid red;
}

In this case, Firebug is your friend.

answered Oct 25, 2010 at 2:24

alex

492k205 gold badges890 silver badges992 bronze badges

5 Comments

vikmalhotra Over a year ago

thanks for the tip, but I needed to know what to change in validate plugin declaration to change the css of input fields.

alex Over a year ago

@ShiVik You shouldn't be using JavaScript to add CSS directly. So I doubt the plugin gives you that option.

vikmalhotra Over a year ago

Do you mean I shouldn't be doing this - $(this).addClass('error'); ?? Anyway, I found the option I was looking for.

alex Over a year ago

@ShiVik Adding a class is different to changing the CSS properties directly.

vikmalhotra Over a year ago

Right. :) Misunderstood your comment somewhat. The plugin indeed does not offer an option to change the css properties directly, but it does offer methods hightlight and unhighlight to do exactly that.

Calvin · Accepted Answer · 2010-10-25 02:25:35Z

0

You would attach a blur() event handler to the input box. In your callback function, you would check the contents of the input then change the css accordingly using css().

Example:

<input type="text" id="myField" />

<script type="text/javascript">
    $("#myField).blur(function() {
        if ($(this).val() == "") {
            $(this).css("borderColor", "red");
        }
    });
</script>

answered Oct 25, 2010 at 2:25

Calvin

8,7377 gold badges45 silver badges52 bronze badges

2 Comments

vikmalhotra Over a year ago

I am doing the form validation using the jquery validate plugin. So, I am looking to change this css using validator plugin, not by using normal jquery events.

Calvin Over a year ago

In that case, I would suggest reading the documentation here: docs.jquery.com/Plugins/Validation

Collectives™ on Stack Overflow

jQuery Validation plugin - how to change css on error

3 Answers 3

Comments

CSS

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

CSS

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related