CSS issue with both jQuery validation plugins and knockout

Question

Problem : CSS does not change when validation completes.

The script . In my project, I use jQuery validations and knockout validation. In the knockout, I have a parent binding model and a child model that are dynamically generated when the button is clicked.

checks : for binding the parent model I have jQuery checks (model checks are used), but for the child model I have knockout checks (since the property is not mentioned in the model)

problem: check message is displayed, but css error class doesn't get bind.For the knockout check I 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 errorMessageClass configuration is ignored if insertMessages is set to false .

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

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

and its implementation looks something like this:

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

Please note that the " canShowErrors " flag is intended for viewing validation errors during sending; if you want to check in real time, remove this flag.

Give it a try.