Bootstrap 输入组插件 durandal 淘汰赛验证答案

【问题标题】：Bootstrap input-group-addon durandal knockout validationBootstrap 输入组插件 durandal 淘汰赛验证
【发布时间】：2014-12-13 20:01:10
【问题描述】：

我有一个要验证的字段，并且敲除处理此元素的验证。接下来，我有一个输入组插件，当淘汰赛验证开始时，它会越界。我一直在尝试寻找解决方法，但找不到另一个可以解决这个问题的方法。

问题：

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

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

【问题讨论】：

标签： twitter-bootstrap validation knockout.js durandal

【解决方案1】：

您可以使用 errorClass configuration option 来设置您自己的 css 类。然后它的一个适当的浮动问题我想得到你想要的效果。

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

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

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

Here is a fiddle 用于演示目的

更新：小提琴的second version

【讨论】：

没有办法让引导程序工作吗？我发现只要是自定义验证基本上可以使用jquery验证来定位errormessage框。但是，由于我正在使用 durandal 并且由于某种原因他无法在验证方法中访问self，因此现在无法使用此功能。还有其他建议吗？
您能否解决您的问题。淘汰赛本身就足够了，因为我不怀疑 Durandal 在这里制造任何问题。
我仍然得到相同的输出，输入组因错误消息而中断。我想这意味着覆盖标准验证？老实说，我想不惜一切代价避免这种情况。
我附上了小提琴的结果。所以这不是你所期待的吗？我们没有覆盖任何东西，只是为输入组验证消息添加一个 css 子句。看看小提琴
我确实看过小提琴，发现它适用于你而不适用于我很奇怪。此外，我在验证中没有“validationMessage”类，而是在跨度上添加了“help-block”类。所以我尝试在那里添加你的 CSS，但它仍然给了我相同的视觉输出。

【解决方案2】：

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

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/

【讨论】：

这个解决方案很漂亮。

【解决方案3】：

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

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

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

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

【讨论】：