views:

26

answers:

3

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: " (required)"
        }
    });

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

Regards

A: 

Something like this will do it...

CSS

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

In this case, Firebug is your friend.

alex
@alex - thanks for the tip, but I needed to know what to change in validate plugin declaration to change the css of input fields.
ShiVik
@ShiVik You shouldn't be using JavaScript to add CSS directly. So I doubt the plugin gives you that option.
alex
@alex - Do you mean I shouldn't be doing this - `$(this).addClass('error');` ?? Anyway, I found the option I was looking for.
ShiVik
@ShiVik Adding a class is different to changing the CSS properties directly.
alex
@alex - 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.
ShiVik
A: 

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>
Calvin L
@Calvin - 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.
ShiVik
In that case, I would suggest reading the documentation here: http://docs.jquery.com/Plugins/Validation
Calvin L
A: 

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.

ShiVik