Bootstrap twitter 3.0 and knockoutjs validation

Question

With Twitter Bootstrap the validation classes, e.g. has-error or has-warning need to be put on the wrapping form-group element in order to style the input element and it's label. But Knockout-Validation adds the class to the input element.

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

Is it possible to configure Knockout-Validation in a way that it adds the classes to the div and not the input?

Answer 1

The answer by thebringking doesn't get you all the way there. You'll also need to specify the errorMessageClass and decorateInputElement options.

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>