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为1时调用函数来删除city_value输入框的错误信息。

我需要这样的解决方案

    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 Documentation。

请参阅描述性变量名称：

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

您可以通过javascript更改DOM元素的css类来实现它。

假设您的表单有一个id #myform，并且您希望将该类更改为“.city .error”，您可以这样做：

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

对于更复杂的元素结构（即一个id和许多类），你可以浏览元素表并改变你需要的东西：

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元素结构。

如何使用jquery验证插件在validate字段后调用函数

2 个答案: