CODEWITHSUNDEEP
knockout.jsknockout-2.0knockout-validation
Mr.Wang from Next Door
Mr.Wang from Next Door

Reputation: 14820

Customize error message and placement

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?

Upvotes: 8

Views: 17607

Answers (1)

nemesv
nemesv

Reputation: 139758

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.

Upvotes: 19

Related Questions