7

我正在为一个网站使用 twitter 引导程序，我们使用 jquery.validate。

我有一个输入元素，按钮附加到输入元素。这是我们的 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"
},
4

3 回答 3

3

正如 odupont 所说，您可以添加自己的 errorPlacement 实现，但给出的代码不适用于表单中的正常输入字段。通过以下实现，错误放置将适用于本机输入字段和输入附加字段！

errorPlacement: function (error, element) {
   if (element.parent().is('.input-append'))
      error.appendTo(element.parents(".controls:first"));
   else
      error.insertAfter(element);
}
于 2013-02-09T22:59:05.837 回答
2

您可以使用 errorPlacement 选项。

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

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

于 2012-07-12T06:29:28.483 回答
1

正如user579089和odupont所说的那样！

我刚刚解决了这个问题，然后跑去检查是否有人被它卡住了。这是我的代码：

  $("#myform").validate({ 
        highlight: function(label) {
            $(label).closest('.control-group').addClass('error');
        },
        errorPlacement: function (error, element) { 
             if (element.parent().hasClass("input-append")){
                error.insertAfter(element.parent());
             }else{
                error.insertAfter(element);
             } 
        },          
        onkeyup: false,
        onblur: false,
        success: function(label) {
            $(label).closest('.control-group').removeClass('error');
        } 
    });

在此处输入图像描述

于 2013-03-27T21:33:16.930 回答