Question

I am trying to integrate knockout validation and twitter bootstrap in this editor: http://jsfiddle.net/casudeo/Jbp7y/18

I’d like to apply twitter bootstrap’s css for input errors. To do that, I would need to somehow “walk up” to the control-group div and add an ‘error’ class to it. Is there a way to achieve this without modifying the css files?

Additional clarification because of dominik’s comment below:
1) Click the “Add” button to add a new item.
2) Try to save with blank values.
3) KO validation will catch invalid inputs. However, I would also like to apply an “error” css class to highlight invalid fields.

Answer 1

Here is an updated fiddle: http://jsfiddle.net/jearles/Jbp7y/147/

HTML

<div><button data-bind="click: clickMe">Click Me!</button></div>

JS

var ViewModel = function() {
    var self = this;
    self.clickMe = function(data,event) {
      var target;

      if (event.target) target = event.target;
      else if (event.srcElement) target = event.srcElement;

      if (target.nodeType == 3) // defeat Safari bug
        target = target.parentNode;

      target.parentNode.innerHTML = "something";
    }
}

ko.applyBindings(new ViewModel());

The things I changed:

1. Add ‘validationElement’ bindings to the control-group divs
2. Add a call to ‘showAllMessages()’ when errors are detected
3. Ensure the errorElementClass configuration is set to ‘error’