javascript 如何使用 jquery 验证插件在验证字段后调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7441657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call a function after validate field using jquery validation plugin
提问by Kanishka Panamaldeniya
hi i am using jquery validation plugin
嗨，我正在使用 jquery 验证插件
http://docs.jquery.com/Plugins/validation
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
如果我输入少于 3 个字符。它给了我错误
min length 3
最小长度 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()
我想在那之后调用另一个函数 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 .
它在应用程序中递增并设置为 1。
i want to call a function when it is 1 ,i want to remove the error messaege of cityinput box by calling a function when city_valueis 1 .
我想在它为 1 时调用一个函数，我想city通过在city_value为 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
这就是我需要的。请帮忙
}
}
回答by Rob W
From the JQuery validation.validate Documentation.
来自 JQuery validation.validate 文档。
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
});
EDITupdated to your case. I kept the other option inside comment tags for other readers.
编辑更新到您的情况。我将另一个选项保留在其他读者的评论标签中。
回答by flouris
You can change the css class of the DOM element via javascript to accomplish that.
您可以通过 javascript 更改 DOM 元素的 css 类来实现这一点。
Assumming that your form has an id #myform and that you want to change the class to ".city .error" you can do:
假设您的表单有一个 id #myform 并且您想将类更改为“.city .error”，您可以执行以下操作：
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:
对于更复杂的元素结构（即一个 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 */
}
You get the picture. Personally I'd prefer a simpler css element structure.
你得到了图片。我个人更喜欢更简单的 css 元素结构。
