Bootstrap twitter 3.0 和 knockoutjs 验证答案

【问题标题】：Bootstrap twitter 3.0 and knockoutjs validationBootstrap twitter 3.0 和 knockoutjs 验证
【发布时间】：2013-08-26 11:53:50
【问题描述】：

使用 Twitter Bootstrap 验证类，例如has-error 或 has-warning 需要放在包装 form-group 元素上，以便设置输入元素及其标签的样式。但是 Knockout-Validation 将类添加到输入元素中。

<div class="form-group has-error">
    <label class="control-label">Input with error</label>
    <input type="text" class="form-control">
</div>

是否可以通过将类添加到 div 而不是 input 的方式配置 Knockout-Validation？

【问题讨论】：

你能把你的英语说清楚吗？特别是，这句话没有任何意义：“Bootstrap 想要改变 div 而不是输入元素。”想要更改 div 吗？什么分区？以什么方式？这与输入元素有什么关系？

标签： javascript css twitter-bootstrap knockout.js

【解决方案1】：

thebringking 的答案并没有让你一路走好。您还需要指定 errorMessageClass 和 decorateInputElement 选项。

ko.validation.init({
  errorElementClass: 'has-error',
  errorMessageClass: 'help-block',
  decorateInputElement: true
});

var viewModel = ko.validatedObservable({
  name: ko.observable().extend({
    required: true
  }),
  email: ko.observable().extend({
    required: true,
    email: true
  }),
  submit: function() {

    if (!this.isValid()) {
      this.errors.showAllMessages();
    } else {
      alert('good job');
    }
  }
});

ko.applyBindings(viewModel);

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <form class="form-horizontal">
    <div class="form-group" data-bind="validationElement: name">
      <label class="control-label col-xs-2" for="name">Name</label>
      <div class="col-xs-10">
        <input id="name" class="form-control" type="text" data-bind="textInput: name" />
      </div>
    </div>
    <div class="form-group" data-bind="validationElement: email">
      <label class="control-label col-xs-2" for="email">Email</label>
      <div class="col-xs-10">
        <input id="email" class="form-control" type="text" data-bind="textInput: email" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-offset-2 col-xs-10">
        <button type="submit" class="btn btn-primary" data-bind="click: submit">Submit</button>
      </div>
    </div>
  </form>
</div>


<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>

【讨论】：

该选项现在称为 decorateInputElement。见github.com/Knockout-Contrib/Knockout-Validation/wiki/…
谢谢！对于任何尝试类似的人，init 函数需要在视图模型之外/开始绑定之前运行

【解决方案2】：

您可以像这样扩展淘汰赛验证核心：

var init = ko.bindingHandlers['validationCore'].init;
ko.bindingHandlers['validationCore'].init = function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    var config = ko.validation.utils.getConfigOptions(element);
    // if requested, add binding to decorate element
    if (config.decorateInputElement && ko.validation.utils.isValidatable(valueAccessor())) {
        var parent = $(element).parents(".form-group");
        if (parent.length) {
            ko.applyBindingsToNode(parent[0], { validationElement: valueAccessor() });
        }
    }
};

此代码使父表单组使用与输入相同的类进行装饰。

【讨论】：

谢谢，只需将config.decorateElement 更改为config.decorateInputElement 以匹配当前版本。
这是一个非常巧妙的解决方案，也让我找到了其他人也可能遇到的问题的根源——我使用一个自定义绑定来添加包装器元素（对于 Material Design Lite) 并且还有一个 value/textInput 绑定。现在看起来很明显的顺序很重要，因为您需要在验证初始化触发之前添加包装器元素 - 因此请确保您的 value/textInput 绑定在任何自定义绑定之后添加包装器元素。

【解决方案3】：

您将在引导表单 div 上使用“validationElement”绑定处理程序-

<div class="form-group" data-bind="validationElement: someObservable">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess">
</div>

然后您将设置configuration 用于敲除验证插件以使用“has-error”的引导错误类。

ko.validation.init({errorElementClass:'has-error'})

这就是我在我们的工具中执行此操作的方式。

【讨论】：