twitter-bootstrap - Bootstrap input-group-addon durandal knockout validation

Question

我有一个要验证的字段，knockout 处理这个元素的验证。 接下来我有一个 input-group-addon，当 knockout 验证开始时，它越界了。我一直在尝试寻找修复，但我找不到另一个解决这个问题的方法。

问题:

老实说，代码本身非常简单:

<div class="form-group" data-bind="validationElement: emailRepeated">
  <label for="emailRepeated" data-bind="text: translate('EmailConfirm')">[Confirm your Email Address]</label>
  <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="email" class="form-control" id="emailRepeated" data-bind="value: emailRepeated" >
  </div>
</div>

我的 knockout 只有这样的扩展器:

self.emailRepeated.extend({ required: true, email: true, equal: self.email });

有人知道如何让输入插件与输入保持在一起吗？

编辑: 验证后的结果 HTML:

<div class="input-group">
     <span class="input-group-addon">@</span>
     <input type="email" class="form-control has-error" id="emailRepeated" data-bind="value: emailRepeated" title="This is not a proper email address" data-orig-title="">

     <span class="help-block" style="">This is not a proper email address</span>
</div>

Answer 1

您可以使用errorClass configuration option设置您自己的 css 类。然后是适当的 float 问题，我想可以达到您想要的效果。

好的，我想我找到了解决方案。尝试添加以下 CSS

.input-group .validationMessage {
    display: table-caption;
    caption-side: bottom;
}

这会将其格式化为表格样式的新行(标题)并将其放置在底部

Here is a fiddle用于演示目的

更新:second version fiddle