How to call a function after validate field using jquery validation plugin

Question

hi i am using jquery validation plugin

http://docs.jquery.com/Plugins/validation

i want to call to a function after validate a field . like this.

i have a field called city

<input type="text" name="city" class="city" id="input_1">

i want to call to another function after validate this field

this is my code

var x=jq("#contactinfo").validate({
    rules: {

        city: {
            required:{
                depends: function(){
                                return ((type == "Single Store & Venue") || (type == "Chain Store & Venue")|| (type == "Department Store"));
                         }
                    },
            minlength: 3,
            maxlength: 50                   
        },
   },

    messages: {

        city: {
            required: "Enter City",
            minlength: "min length 3"
        },
    }
}); 

if i type less than 3 characters . it gives me the error

min length 3

if no characters in the input it gives me the error

Enter City

i want to call to another function after that like change_background_color()

function change_background_color() {

    $('.city').css('background-color','blue');

}

how to do this . please help me , i tried so hard and failed ........ thanks

UPDATE

the actual problem is i have global variable

var city_value = 0;

it is increments and sets to 1 in the application .

i want to call a function when it is 1 ,i want to remove the error messaege of city input box by calling a function when city_value is 1 .

i need a solution like this

    rules: {

        city: {
            required:true,
            minlength: 3,
            maxlength: 50                  
        },
         messages: {

        city: {
            required: "Enter City",
            minlength: "min length 3"
        },
    }
   },

i want to call a method after this error message created .

in my function what i do is

function remove_city_error(){

      if(city_value ==1){

        $('.city').next('.error').remove();
      }

that's what i need . please help

}

Answer 1

From the JQuery validation.validate Documentation.

See the descriptive variable names:

$(".selector").validate({
  highlight: function(element, errorClass, validClass) {
     $(element).addClass(errorClass).removeClass(validClass);
     $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
     $(element).removeClass(errorClass).addClass(validClass);
     $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
  },
  success: function(label) {
     label.addClass("valid").text("Ok!")
  }
});

Ported to your case:

$(".city").validate({
  /*highlight: function(element, errorClass, validClass) {
     $(element).css("background-color", "blue");
  },
  unhighlight: function(element, errorClass, validClass) {
     $(element).css("background-color", "");//default color
  },*/
  success: remove_city_error
});

EDIT updated to your case. I kept the other option inside comment tags for other readers.

Answer 2

You can change the css class of the DOM element via javascript to accomplish that.

Assumming that your form has an id #myform and that you want to change the class to ".city .error" you can do:

document.getElementById("myform").setAttribute("class", ".city .error");

For a more complex element structure (i.e. one id and many classes within) you can go through the table of elements and change what you need like this:

var sec = document.getElementById("myform").getElementsByTagName("input");
for (var i = 0; i < sec.length; i++) {
    cs = sec[i].getAttribute("class"); /* get current class */
    sec[i].setAttribute("class", cs + '.error'); /* add class to existing */
}

You get the picture. Personally I'd prefer a simpler css element structure.