29

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クラスを ではなくに追加するように Knockout-Validation を構成することは可能inputですか?

4

3 に答える 3

57

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>

于 2013-11-30T07:28:47.560 に答える
5

次のようにノックアウト検証コアを拡張できます。

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() });
        }
    }
};

このコードは、親フォーム グループを入力と同じクラスで装飾します。

于 2014-01-20T17:22:16.083 に答える