jQuery.validate在触发后杀死字符计数器

Question

在对此事进行了大量搜索后，我一直无法自行找到一个问题的答案，即jQuery验证插件正在通过PHP表单蚕食我用于短信的字符计数插件。

如果你在前端进入表单，并开始在文本区域键入，计数器工作得很好，当然验证不会启动，因为元素中有文本。。。但是，为了进行测试，如果您尝试在没有消息的情况下提交表单，则会触发验证，并显示相对于textarea的错误消息，当您输入副本时，验证消息会消失，但字符计数器不再工作。

这是我正在使用的字符计数器：http://cssglobe.com/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas/

以下是我的脚本布局方式：

$(function(){
//irrelevant functions have been omitted
$("#smsMessage").charCount({
allowed:110,        
warning:10, 
});
$('form').validate();
});

我甚至尝试重新启动计数器函数，作为验证的回调，但这只会导致在textarea旁边放置一个重复的、无功能的计数器。

$(function(){
//irrelevant functions have been omitted
$("#smsMessage").charCount({
allowed:110,        
warning:10, 
});
$('form').validate({
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
$("#smsMessage").charCount({
allowed:110,        
warning:10, 
});
}
}
});
});

诚然，这是我一段时间以来的第一个单独的webDev项目——它是为我的未婚妻和我的婚礼网站准备的，所以我想把它分类一下。如果有任何方法可以让计数器和验证很好地结合在一起，那就太好了。如果不是，这并不完全是世界末日，但它仍然不太理想。

Answer 1

问题是您的计数器插件在跟踪计数器的位置方面不是很聪明。它通过将计数器放在文本区域后面来创建计数器。validate插件对其错误消息执行相同的操作。最简单的修复方法是告诉验证插件将错误放在其他地方。试试这个：

$('form').validate({
errorPlacement: function(error,element){
if (element.attr('id') == 'smsMessage'){
error.insertAfter(element.next());
} else {
error.insertAfter(element);
}            
}       
});​

我做了一个工作示例，所以你可以尝试一下：http://jsfiddle.net/ryleyb/6HKuq/