Javascript jquery使用字符计数器插件进行验证

我有一个页面，其中包含使用jqueryvalidate插件验证的字段，并希望在字段上包含一个类似twitter的字符计数器，以查看剩余的字符数

这是我的演示

两个字符计数器都可以正常工作，直到 问题在于，当jqueryvalidate触发验证错误（required、maxlength等）时，字符计数器就会停止处理任何有错误的元素

我不相信这是字符计数器插件本身的问题。我认为jqueryvalidate产生的错误会导致这种情况

无论如何，包括下面的完整片段，非常感谢您的帮助

/**
*字符计数器v1.0
* ======================
*
*字符计数器是一个简单的、Twitter风格的字符计数器。
*
* https://github.com/dtisgodsson/jquery-character-counter
*
*@作者达伦·泰勒
*@作者电邮：shout@darrenonthe.net
*@author-Twitter:darrentaytay
*@author网站：http://darrenonthe.net
*
*/
（函数（$）{
$.fn.characterCounter=函数（选项）{
var默认值={
错误:，
限额：150，
计数器包装器：“span”，
反CSSClass:“帮助阻止”，
反格式：“%1”，
CounterExceededCSClass:“已超出”，
onExceed:function（count）{}，
onDeceed:函数（计数）{}，
自定义字段：{}，
};
var options=$.extend（默认值，选项）；
返回此值。每个（函数（）{
$（this）.after（generateCounter（））；
事件（本）；
支票计数（本）；
});
函数自定义字段（参数）
{
var html=''；
for（参数中的变量i）
{
html+=''+i+'='+params[i]+''；
}
返回html；
}
函数generateCounter（）
{
var classString=options.counterCssClass；
if（options.customFields.class）
{
classString+=“”+options.customFields.class；
删除选项。自定义字段['class']；
}
返回“”；
}
函数renderText（计数）
{
返回选项。反格式。替换（/%1/，计数）；
}
函数检查计数（元素）
{
var characterCount=$（元素）.val（）.length；
var剩余=options.limit-characterCount；
如果（剩余<0）
{
$（元素）.next（“.”+options.counterCssClass）.addClass（options.counterExceededCSclass）；
options.excelled=true；
options.onExceed（characterCount）；
}
其他的
{
如果（超出选项）{
$（元素）.next（“.”+options.counterCssClass）.removeClass（options.counterExceededCSclass）；
选项。Onceed（字符计数）；
options.excelled=false；
}
}
$（元素）.next（“.”+options.counterCssClass）.html（renderText（剩余））；
};    
函数bindEvents（元素）
{
$（元素）
.bind（“键控”，函数（）{
支票计数（要素）；
})
.bind（“粘贴”，函数（）{
var self=这个；
setTimeout（函数（）{checkCount（self）；}，0）；
});
}
};
})（jQuery）；
$.validator.setDefaults({
错误元素：“span”，
errorClass:“帮助阻止”，
//有效类：'停留'，
突出显示：函数（元素、errorClass、validClass）{
$（元素）.addClass（errorClass）；//.removeClass（errorClass）；
$（元素）。最近（'.form group'）。removeClass（'has-success'）。addClass（'has-error'）；
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（元素）.removeClass（错误类）；//.addClass（有效类）；
$（元素）。最近（'.form group'）。removeClass（'has-error'）。addClass（'has-success'）；
},
errorPlacement:函数（错误，元素）{
if（element.parent（'.input group'）.length）{
错误.insertAfter（element.parent（））；
}else if（element.hasClass（'select2'））{
错误.insertAfter（element.next（'span'）；
}否则{
错误。插入符（元素）；
}
}
});
$（文档）.ready（函数（）{
$（“.counter”）.characterCounter({
计数器类：“文本计数器”，
限额：140，
反格式：“剩余字符：%1”，
});
var validatorStrat=$（“#策略表单”）.validate({
规则：{
示例InputEmail1：{
要求：正确，
},
ZB_注：{
要求：正确，
最大长度：1000，
},
ZC_注：{
要求：正确，
最大长度：1000，
},
},
submitHandler:函数（形式）{}
});
});

电子邮件地址
申请的金额和时间？
谁将参与诉讼？
提交
问题是由于插入错误元素的位置与用于设置计数器文本的遍历位置相比

在计数器插件中，您正在查找
next（）
，以使用以下命令设置计数显示：

$(element).next("." + options.counterCssClass).html(renderText(remaining));

这是基于以下结构：

<inputElement/>
<counterDisplay/>

查找原因（问题）

我相信我已经发现了问题所在。
当a字段未通过验证规则时，它将显示错误。
错误将作为以下内容附加到DOM中：

此字段为必填字段

当我用控制台取下它时，计数器工作了。
这让我感到奇怪——也许checkCount函数仍然有效，但“输出”（即
span
计数器）却不起作用

所以在第72行，我补充道：

console.log(characterCount);

再次复制了这个场景——而且
<inputElement/>
<validatorError/>
<counterDisplay/>

error.parent().append(element); 

console.log(characterCount);

<span id="ZB_note-error" class="help-block" style="display: none;"></span>

     console.debug( options.counterCssClass );
     console.debug( $(element).next("." + options.counterCssClass).html());