我正在为网站使用twitter bootstrap,我们使用
jquery.validate.
我有一个输入元素,其中按钮附加到input元素.这是我们的js验证中的必填字段.
代码是：
<div class="controls">
<div class="input-append">
<input tabindex="1" name="url" class="input-large" id="url" type="text" placeholder="http://somewebsite.com" autocapitalize="off">
<button class="btn" type="button" name="attach" id="attach" />Fetch</button>
</div>
</div>
验证错误类使用jquery验证规则,并且在每个其他元素上都能完美运行.但似乎错误的跨度是在输入元素之后附加的,在大多数情况下这是非常好的.但是在这个输入字段的实例中,它会向上显示,因为它会分离附加的按钮.
下面是我的意思(前后)的图像
我真的需要为这个元素的错误消息应用一个不同的类,但如果我能弄清楚如何,则会出错.
errorClass: "help-inline",errorElement: "span",highlight:function(element,errorClass,validClass) {
$(element).parents('.control-group').addClass('error');
},unhighlight: function(element,validClass) {
$(element).parents('.control-group').removeClass('error');
$(element).parents('.control-group').addClass('success');
}
对于输入字段,错误事件是：
url:{
required:true
},
和消息是：
messages:{
url:{
required:"Enter URL beginning with http"
},
解决方法
正如odupont所说,你可以添加自己的errorPlacement实现,但是给出的代码不适用于表单中的普通输入字段.通过以下实现,错误放置将适用于本机输入字段和输入附加字段！
errorPlacement: function (error,element) {
if (element.parent().is('.input-append'))
error.appendTo(element.parents(".controls:first"));
else
error.insertAfter(element);
}