Configure error message and placement

Question

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

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

• I want to change "This field is required." text.
• I want to change the placement of the HTML <span> element.
• I want to add a CSS class ( .err in particular) to the text box to add a red border.

How can this be done with a knockout check?

Answer 1

You can change the default messages to check based on each property:

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

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

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

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

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

JSFiddle demo.