Bootstrap input-group-addon durandal knockout验证

Question

我有一个要验证的字段，而敲除处理这个元素的验证。 接下来我有一个输入组插件，当敲门的验证开始时它已经超出界限。我一直在寻找修复，但我找不到另一个解决这个问题。

问题：

说实话，代码本身非常简单：

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

我的淘汰赛只有这样的扩展器：

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类。然后它是适当浮动的问题，我猜想能达到你想要的效果。

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这会将其格式化为表格样式的新行（标题）并将其定位在底部

Here is a fiddle用于演示目的

更新：小提琴的second version

Answer 2

我意识到这有点晚了，但我遇到了同样的问题，并想出了一个不同的解决方案。我所做的是覆盖ko.validation.insertValidationMessage函数，以查看该元素是否是输入组的一部分。如果是这样，我会在输入组父元素之后插入消息。无论输入组插件是左侧还是右侧，这都有效。

var insertValidationMessage = ko.validation.insertValidationMessage;

ko.validation.insertValidationMessage = function (element) {
    if ($(element.parentElement).hasClass('input-group')) {
        return insertValidationMessage(element.parentElement);
    }
    return insertValidationMessage(element);
}

这是在js fiddle http://jsfiddle.net/kengineer/zfLjdrks/6/

中工作的

Answer 3

如果输入右侧有input-group-addon，则zewa666的答案无效。

在这种情况下，您可以使用绝对定位。像这样：

.input-group .help-block {
    display: block;
    position: absolute;
    left: 0px;
    top: 28px;
}

.form-group.has-error {
    margin-bottom: 30px;
}