Customize error message and placement

Mr.Wang from Next Door picture Mr.Wang from Next Door · Sep 18, 2013 · Viewed 17.1k times · Source

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?

Answer

nemesv picture nemesv · Sep 18, 2013

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.