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 acplish 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 acodate the custom error message?

I hope that makes sense.

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 acplish 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 acodate the custom error message?

I hope that makes sense.

• javascript
• knockout-validation

• 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./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. – user1625066 Commented Jan 7, 2013 at 22:39
• 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. – RHarris Commented Jan 17, 2013 at 16:24

1 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/nuDJ3/180/