How to change class of valid form field - jQuery form validation plugin


Tags: jquery,css,jquery-validate

Problem :

I am using bassistance jQuery form validation plugin.

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

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

I made a form with form fields and set rules;

JavaScript

$(document).ready(function() {
    $.validator.setDefaults({
        submitHandler: function() {
          alert("submitted!");
        }
    });
    var validator = $("#testform").validate({
        rules: {
            field1: "required",
        },
        messages: {
            field1: "",
        },
        error: function(element) {
            element.addClass("error");
        },
        success: function(label) {
            label.addClass("checked");
        }
    });
});

CSS

#testform input{
  border: solid 2px black;
}
#testform input.error{
  border: solid 2px #CC0000;
}
#testform input.checked{
  border: solid 2px #094AB2;
}

HTML

<form id="testform" name="testform">
<input id="field1" name="field1" type="text" value="">
<input id="field2" name="field2" type="text" value="">
<input type="submit" value="submit"/>
</form>

The error function is working alright. But the success function is not adding styles to input type=text, instead, default style appears (black border instead of blue). How can I solve this?

Here is the working fiddle



Solution :

Change your #testform input.checked to #testform input.valid. I got this by submitting the form and check the class with developer tools or firebug. I saw the class name changed to valid and not checked

Here's a Live Demo


    CSS Howto..

    How to change background color of elements every 5s using jquery? [duplicate]

    How to vertically align a form and image

    CSS how to push text away from border

    How to set content area div height with dynamic header div

    How can I make a background image of a site start off fitting to screen and then zoomable?

    Show icon on containing div hover

    How to center hgroup in css

    how to add class to razor form and give padding?

    hide/show element with add/removeClass with CSS transition

    How to hide some text in the middle of a string with only css [duplicate]

    How to isolate text in a

    tag to bold without changing the format of remaining paragraph

    How can i use the visibility attribute in css to make my submenu appear and reappear?

    How to style pseudo counter in CSS

    How to prevent CSS transform skew from breaking child element position?

    How to extend jQuery.css from plugin

    How to set max-width for DIV contents but not the DIV itself?

    How do I stop my 'body' from eating my 'foot'

    Three extra pixels at the bottom of the page unaccounted for and not sure how to get rid of them?

    How to get multiple bottom only borders on a circle

    How to set input:focus style programatically using JavaScript

    How can I split this image into pieces so when I write a long text, it doesn't go outside of the div?

    How to put button next to Image in CSS?

    How to float: top?

    How to select a div with specific css property

    How to add css for specific input type text

    CKEditor 4: How to add CSS stylesheet from plugin?

    Angular.js: How to change div width based on user input

    How do I make my div with six different pictures expand outwards when clicking it?

    How to find out if an element is in a fixed positioned container?

    jquery hide and show for printing