knockout validation error message span

Question

I am using knockout validation plugin and its working fine but i have a little problem , I want to make the validation span a little but more prominent by using css , and i only want to insert the validation span just before the input element , right now its appending span after input element .

here is 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 append this span before the element .

Answer 1

If you want to customize how the error messages are displayed you need to use the predefined validation bindings, in this case the validationMessage.

Using this binding you can display the validation messages for a given property wherever you want so 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="">

Additionally to prevent double displaying the error messages you also need to turn off the automatic message insertion with:

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

Demo JSFiddle.