Knockout Verification Error Message Error

Question

I use the knockout verification plugin and it works fine, but I have a little problem, I want to change the verification range a little, but more noticeable with css, and I only want to insert the verification range immediately before the input element, now its additional range after the input element .

that's how its rendering right now,

<input id="personName" class="form-control placeholder has-error" type="text" data-bind="value: name" placeholder="Your name" title="This field is required." data-orig-title=""> <span class="validationMessage" style="">This field is required.</span> 

So, I just want to add this range in front of the element.

Answer 1

If you want to customize the display of error messages, you need to use predefined bindings , in this case validationMessage .

Using this binding, you can display verification messages for this property wherever you want, for example, before the input element:

 <span data-bind="validationMessage: name"></span> <input id="personName" class="form-control placeholder has-error" type="text" data-bind="value: name" placeholder="Your name" title="This field is required." data-orig-title=""> 

In addition, to avoid double-displaying error messages, you also need to disable the automatic insertion of messages using:

 ko.validation.init({insertMessages: false}); 

JSFiddle demo.