Customize error message and placement

Question

Currently the Knockout-Validation plugin automatically add this HTML element to my web page:

<span class="validationMessage">This field is required.</span>

1. I want to change the "This field is required." text.
2. I want to change the placement of the <span> HTML element.
3. I want to add a CSS class (.err, specifically) to my textbox so that I can add a red border.

How can that be done with Knockout-Validation?

Solution

You can change the default messages for a validation on a per property basis:

test: ko.observable().extend({
        required: {
            params: true,
            message: "This is required"
        }
    })

You can use the validationMessage binding to display the errors wherever you want:

 <span data-bind="validationMessage: test"></span>

And you can use the decorateElement and errorElementClass options (or the other validation bindings) to add some custom classes on your inputs:

ko.validation.init({
    decorateElement: true,
    errorElementClass: 'err'
});

Demo JSFiddle.

Comments

[leigero]

This fiddle doesn't appear to do anything.

[nemesv]

@leigero yeah, there was a broken link in the fiddle. I've updated it now.