输入追加的jQuery验证(Twitter Bootstrap) [英] jQuery Validation on input-append ( Twitter Bootstrap )

问题描述

我在网站上使用Twitter引导程序，而我们使用jquery.validate.

I am using twitter bootstrap for a site, and we use jquery.validate.

我有一个输入元素，按钮上附加了输入元素.这是我们的js验证中的必填字段.

I have a input element with button appended to input element. This is a required field within our js validation.

代码是:

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

Validation错误类使用jquery验证规则，并且可以在其他所有元素上完美运行.但是，似乎错误的范围是附加在输入元素之后的，在大多数情况下，这绝对是可以的.但是在这种情况下，因为它分离了附加的按钮，所以它使显示向上翘.

Validation error class uses jquery validation rules and works perfectly on every other element. But seemingly the span for the error is appended right after the input element, which in most cases is absolutely fine. But in this instance on this input field, it cocks the display up, because it detaches the appended button.

下面是我的意思的图片(之前和之后) 对于这个元素，我确实需要对错误消息应用其他类，但是如果我能弄清楚该怎么做，就会感到困惑.

Below is image of what I mean ( before and after ) I really need to apply a different class to the error message for this one element, but buggered if I can figure out how.

errorClass: "help-inline",
            errorElement: "span",
            highlight:function(element, errorClass, validClass) {
                $(element).parents('.control-group').addClass('error');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).parents('.control-group').removeClass('error');
                $(element).parents('.control-group').addClass('success');
            }

对于输入字段，错误事件为:

For the input field the error event is:

url:{
required:true
},

，消息为:

messages:{
url:{
    required:"Enter URL beginning with http"
},

推荐答案

如odupont所述，您可以添加自己的errorPlacement实现，但是给出的代码不适用于该格式的常规输入字段.通过以下实现，错误放置将适用于本机输入字段和输入追加字段！

As said by odupont you can add your own implementation of errorPlacement, but the code given will not work for your normal input-fields in the form. With the following implementation the error placement will work for both native input fields and input-append fields!

errorPlacement: function (error, element) {
   if (element.parent().is('.input-append'))
      error.appendTo(element.parents(".controls:first"));
   else
      error.insertAfter(element);
}

这篇关于输入追加的jQuery验证(Twitter Bootstrap)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！