KnockoutJS Validate - added css class element

Question

I'm having trouble getting a notocklow validate to add a css error class to my input.

I configured it like this:

var knockoutValidationSettings = {
    insertMessages: true,
    decorateElement: true,
    errorMessageClass: 'error',
    errorElementClass: 'error',
    errorClass: 'error',
    errorsAsTitle: true,
    parseInputAttributes: false,
    messagesOnModified: true,
    decorateElementOnModified: true
};

data.vm = new vmFunc();

ko.applyBindingsWithValidation(data.vm, $('#claimsSettingsSubmodule')[0], knockoutValidationSettings);

A space is added with the corresponding css class, but the input remains unchanged.

The input html looks like this:

<input type="text" id="claims-settings-referrer-name" data-bind="value: referrerName" />

It seems to work if I do it

<input type="text" id="claims-settings-referrer-name" data-bind="value: referrerName, validationElement: referrerName" />

but it is less than the least can be said.

Answer 1

To automatically decorate your input elements with errorElementClass, you need to set the property decorateInputElementto trueinknockoutValidationSettings

var knockoutValidationSettings = {
    insertMessages: true,
    decorateElement: true,
    errorMessageClass: 'error',
    errorElementClass: 'error',
    errorClass: 'error',
    errorsAsTitle: true,
    parseInputAttributes: false,
    messagesOnModified: true,
    decorateElementOnModified: true,
    decorateInputElement: true
};

decorateElementOnModifiedonly works with binding validationElement, as you already noted.