输入附加的jQuery验证(Twitter Bootstrap)

Question

我在网站上使用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, errorClass, validClass) {
                $(element).parents('.control-group').removeClass('error');
                $(element).parents('.control-group').addClass('success');
            }

对于输入字段,错误事件是:

url:{
required:true
},

和消息是:

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

Answer 1

您可以使用 errorPlacement 选项。

errorPlacement: function (error, element) {
   error.appendTo(element.parents(".controls:first"));
}

在此示例中， error 元素将附加到父 div .controls中。