Bootstrap twitter 3.0 y validation de knockoutjs

Con Twitter Bootstrap, las classs de validation, p. Ej., Has has-error o has-warning deben colocarse en el elemento wrapping form-group para diseñar el elemento de input y su label. Pero Knockout-Validation agrega la class al elemento de input.

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

¿Es posible configurar Knockout-Validation de forma que agregue las classs al div y no a la input ?

La respuesta de thebringking no te lleva todo el path hasta allí. También deberá especificar las opciones errorMessageClass y decorateInputElement .

 ko.validation.init({ errorElementClass: 'has-error', errorMessageClass: 'help-block', decorateInputElement: true }); var viewModel = ko.validatedObservable({ name: ko.observable().extend({ requinetworking: true }), email: ko.observable().extend({ requinetworking: 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> 

Puede ampliar el núcleo de validation knockout de esta manera:

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

Este código hace que el grupo de formulario padre sea decorado con la misma class que la input.

Utilizaría el controller de enlace "validationElement" en el formulario de arranque.

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

Luego, establecería la configuration para el complemento de validation de desactivación para usar la class de error de arranque de "has-error".

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

Esta es la forma en que lo hago en nuestra herramienta.