Search code examples
twitter-bootstrapknockout-2.0knockout-validation

Knockout Validation success classes?

I am using Knockout Validation and have everything working as I wanted. I am using it with Twitter Bootstrap and have the proper classes being set when an error is encountered.

With jQuery Validation, I was able to also set classes when a validated element passed validation. For instance, you could turn the input box green when the user had entered valid information.

Is there a way to do that with Knockout Validation? Anyone have an example?

Solution

  • Currently, Knockout-Validation doesn't support a "validationSuccess" class to be added to an element if a validated value isValid. (But we do take pull requests).

    However, if you simply want to indicate success on an element, you can do something like:

    <input type="text" data-bind="value: lastName, css: { success: lastName.isModified() && lastName.isValid() }"/>

    If you want this to be the default behavior, just look at overriding the ko.bindingHandlers['validationMessage'] and ko.bindingHandlers['validationElement'] functionality.

    I've got an example working here (use JSBin in Chrome): http://jsbin.com/miqanineva/2/edit?html,css,js,output