Problems with knockout-validation custom message template

Question

I've not used Knockout Validation and I'm trying to get a feel for what can be done with it.

I'm trying to figure out if it is possible to display an icon rather than an error message to the right of an input tag when there is an error. And, if the user hovers over the icon, the error message is displayed.

Has anyone done this or have an idea of how to accomplish this?

Thanks.

EDIT: (more detailed example of what I'm trying to do)

Say I have the following in my view model:

var firstName = ko.observable().extend({required: true});

My HTML:

<input data-bind="value: firstName" />

My understanding is that if the first name textbox were left blank, then (by default) some text would be displayed to the right of the textbox stating that this field is required.

What I'm trying to understand is how to change the default behavior of displaying error text on the right to displaying an icon on the right which, when hovered over, will popup the error message.

So, a start would be something like:

<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">    
    <input data-bind="value: firstName" />
    <input data-bind="value: lastName" /> //also required
</div>
<div id='myCustomTemplate'>
    //This icon should only display when there is an error
    <span class="ui-icon ui-icon-alert" style="display: inline-block"/>

    //css/javascript would display this when user hovers over the above icon
    <span data-bind="validationMessage: field"  />  
</div>

I have no clue if I'm using the messageTemplate feature correctly. I also wouldn't know what to bind the text to in the customTemplate in order to display the correct error message for each error. IOW, firstname and lastname could have custom error messages. If they are both using the same template, how does the template accomodate the custom error message?

I hope that makes sense.

Incudes

Some code would be helpful to tailor the solution to your needs but the answer is YES. Knockout allows you to setup a custom div or span tag with a validationMessage attribute that can be used to override the default error text (github.com/ericmbarnard/Knockout-Validation/wiki/…). In addition to this, you can setup a custom validator function for your observables which can activate/deactivate the tooltip if an error is found. If you can show us some sample code (preferably in a fiddle), we can help you make the needed changes to get it to work the way you want. – Disk

Thanks for your response and sorry for the delay ... a few vacation days. I added an edit to more fully explain what I'm after. – Incudes

Answer 1

It is possible to show an icon and to display the error message on hovering.

In one project we are doing something similar. We show a badge with a error number, but we use decorateElement to highlight the fields and errorsAsTitleOnModified to show the errors when hovering over the input.

To create a error messageTemplate you should wrap your template in a script tag. It works like templates of the ko template binding.

Inside the template you can access the validated observable by referring to 'field'. The error message is stored in the property 'error' of your observable.

<script type="text/html" id="myCustomTemplate">
    <span data-bind="if: field.isModified() && !field.isValid(), 
                     attr: { title: field.error }">X</span>
</script>

I have created a fiddle to show this in action: http://jsfiddle.net/nuDJ3/180/

Devonne

Thanks tons! This is exactly what I was trying to accomplish! – Incudes

Actually, now that I play with this a bit more, I'm seeing that it isn't working quite like I expected. First, the X (badge) never goes away. Second, check out this fiddle jsfiddle.net/nuDJ3/5 and notice that clearing a field does not trigger the error message. Am I missing something? – Incudes

Oh I am sorry. I missed to hide the message if it is either valid or not modified. Knockout-validation inserts the span once and after that you have to use normal bindings. I have updated the answer and created a new version of the fiddle. The trick is to insert "if: field.isModified() && !field.isValid()" to the binding of the span. – Devonne