CSS issue with both jQuery and Knockout validations plugins

Question

Problem:CSS is not getting changed when validation are fired

Scenario: In my project I am using jQuery validations and knockout validation. In knockout I am having a parent model binding and child model that are dynamically generated on button click event.

validations:for parent model binding i have jQuery validations(model validations are used) but for child model I am having knockout validations(as property is not mentioned in the model)

problem:Validation message are getting displayed but css error class is not getting bind.For knockout validation I have mentioned

 ko.validation.init({
    registerExtenders: true,
    messagesOnModified: false,
    insertMessages: false,
    decorateElement: true,        
    errorElementClass: 'input-validation-error',
    errorMessageClass: 'field-validation-error'
});

knockout version:knockout:3.0.0

Answer 1

The configuration errorMessageClass is neglected when the insertMessages is set to false.

I suspect you are using a custom error message element in the View. Then you can use this method notValidField bound to the visible keyword.

<span data-bind="visible: notValidField(searchCriteria.nsn, canShowErrors()),
 text: valMsg" class="error"></span>

and its implementation is something like this:

notValidField = function (boundField, canShowErrors) {
    return boundField.isModified() && !boundField.isValid() && canShowErrors;
};

Note that the "canShowErrors" flag is for viewing validation errors on submit, if you want realtime validation, remove this flag.

Give it a try.