CODEWITHSUNDEEP
twitter-bootstrapknockout.js
user1590749
user1590749

Reputation: 71

Knockout Validation and Twitter Bootstrap Error CSS

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.

Upvotes: 4

Views: 4762

Answers (1)

John Earles
John Earles

Reputation: 7194

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'

Upvotes: 7

Related Questions