Как вызвать функцию после проверки поля с помощью плагина проверки jquery

Question

привет, я использую плагин проверки jquery

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

Я хочу вызвать функцию после проверки поля.как это.

у меня есть поле с именем city

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

я хочу вызвать другую функцию после проверки этого поля

это мой код

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"
        },
    }
}); 

если я наберу меньше 3 символов.выдает ошибку

мин. длина 3

, если на входе нет символов, выдает ошибку

Введите город

я хочу после этого вызвать другую функцию, например change_background_color()

function change_background_color() {

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

}

как это сделать.пожалуйста, помогите мне, я так старался и потерпел неудачу ........ спасибо

ОБНОВЛЕНИЕ

фактическая проблема у меня есть глобальная переменная

var city_value = 0;

этоэто инкременты и устанавливает в приложение значение 1.

я хочу вызвать функцию, когда она равна 1, я хочу удалить сообщение об ошибке поля ввода city, вызвав функцию, когда city_value равно 1,

Мне нужно решение, подобное этому

    rules: {

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

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

Я хочу вызвать метод после создания этого сообщения об ошибке.

в своей функции я делаю

function remove_city_error(){

      if(city_value ==1){

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

, это то, что мне нужно.помогите пожалуйста

}

Answer 1

Из JQuery validation.validate Документация .

См. Описательные имена переменных:

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

перенесено на ваш случай:

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

РЕДАКТИРОВАТЬ обновлено для вашего случая. Я оставил другой вариант внутри тегов комментариев для других читателей.

Answer 2

Вы можете изменить класс css элемента DOM с помощью javascript, чтобы выполнить это.

Предполагая, что ваша форма имеет идентификатор #myform и что вы хотите изменить класс на ".city .error", выможно сделать:

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

Для более сложной структуры элементов (т.е. с одним идентификатором и множеством классов внутри) вы можете просмотреть таблицу элементов и изменить то, что вам нужно, следующим образом:

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 */
}

Вы получаете картину.Лично я предпочел бы более простую структуру элементов CSS.