Knockout validation not applying error class

Question

I've applied knockout validation to a text input and the validation correctly shows, but the errorMessageClass is not applied to the error message. I assume I've set something up wrongly, but I can't see what.

My HTML is just a simple text box with a span to which I've applied the validationMessage binding:

<div>
   Mandatory field:
</div>
<span>
   <span data-bind="validationMessage: userInput"></span>
   <input type="text" data-bind="textInput: userInput" />
</span>

I have used typescript to build a basic knockout model:

class MyViewModel {
    constructor(userInput: string) {        
        this.userInput(userInput);
    }

    userInput = ko.observable('').extend({
        required: {
            params: true,
            message: 'Please enter a value.'
        }
    });
}

This is the document ready function which sets up the knockout validation and applies knockout bindings:

$(function () {
    ko.validation.init({
        insertMessages: false,
        errorMessageClass: 'field-validation-error'
    });

    window.vm = new MyViewModel('Delete me');

    ko.applyBindings(window.vm);
});

I've set up a jsfiddle to replicate my problem. I could obviously just put the class on the span manually, but when I've used knockout validation previously I haven't had to. What do I need to change in order to get knockout validation to apply the class automatically?

Answer 1

The class specified by errorMessageClass is applied to automatically generated messages only. You can turn these messages on by configuration parameter insertMessages.

Take a look: https://jsfiddle.net/r59dyjj0/4/