I've implemented knockout validation on a text input and the validation is working correctly. However, the errorMessageClass is not being applied to the error message. I must have made a mistake in my setup, but I can't seem to identify it.
My HTML code consists of a basic text box with a span where I have added the validationMessage binding:
<div>
Mandatory field:
</div>
<span>
<span data-bind="validationMessage: userInput"></span>
<input type="text" data-bind="textInput: userInput" />
</span>
I have created a simple knockout model using TypeScript:
class MyViewModel {
constructor(userInput: string) {
this.userInput(userInput);
}
userInput = ko.observable('').extend({
required: {
params: true,
message: 'Please enter a value.'
}
});
}
Below is the document ready function where I initialize knockout validation and apply knockout bindings:
$(function () {
ko.validation.init({
insertMessages: false,
errorMessageClass: 'field-validation-error'
});
window.vm = new MyViewModel('Delete me');
ko.applyBindings(window.vm);
});
To demonstrate the issue, I have created a jsfiddle example. Although manually adding the class to the span works, I would like knockout validation to handle this automatically as it has done in my previous projects. What modifications should I make to ensure knockout validation applies the class seamlessly?