knockout validation error message span

css, knockout-2.0, knockout-validation, knockout.js

Solution

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.

Problem

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 .

Original source