knockout-validation change input background color on invalid model

Question

For this fiddle, how can i make the background color of the box change when the model is invalid?

ko.validation.configure({
    insertMessages: false,
    decorateElement: true,
    errorElementClass: 'error'
});

NameModel = function(model) {
    var self = this;

    //Observables
    self.firstName = ko.observable().extend({
        required: true
    });

    ko.validation.group(self);
    return self;
};

I am trying to achieve something similar to the store checkout below.

Answer 1

Knockout-Validation plugin adds an error class to the elemnts which are not valid. All you need to do is set the background color for that class:

.error {
    background: yellow;
}

If you need to change the element error class you cand do that too. More info in the configuration section of the documentation (https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Configuration).