NovoGeek's Blog (Archive)

Displaying validation messages using callouts is a good way of educating the user on what has to be filled on the form. ASP.NET AJAX's Validator callout does a good job in this aspect. But how about implementing the same using jQuery?

I was googling for this and quickly came across jQuery validator callout plugin. This is an excellent plugin which suits many forms. However, I could not use it as it displays callout either on the top or bottom of the textboxes. I need callouts to be displayed to the right/left side of textboxes. I tried to customize it, but without much output. So tried for other options.

It struck me that I can use jTip for this requirement. However, jTip expects every call to be an AJAX call. So finally came to clueTip and yeah, I'm on the right track. The output would be something like this:

One good point which makes me feel this approach is better than ASP.NET AJAX toolkit callout is, unlike the toolkit callout, I need not write HTML for each and every popup. Just place the div at one place in your mark up and hide it. Reuse that piece for every call out.

How to use clueTip as Validator callout?

First, please check how clue Tip works. If you are aware of how to use clueTip, the below code would be a cake walk.

1. Place a div in your HTML like this: <div id="ValidationMessageDiv"></div>

2. Create 2 JavaScript functions "showCallOut(element,errorMessage)" and "removeCallOut()".

3. In the validation code for your "Submit" button, write this:

$("#SubmitButtonId").click(function() {

   if (ContactNumberText.val() === '') {

      showCallOut('ContactNumberTextId', "Please enter contact number"); 

    }

}); 

That's it! You can now use the showCallOut(,) function in every button click.

Here are the definitions of the fuctions used:

function showCallOut(element,errorMessage) {

    element = '#' + element;

    $(element).addClass('jt ui-state-error').attr('message', errorMessage);

    var firstErrorElement = $('.ui-state-error:first');

    var firstErrorElementTop = firstErrorElement.offset().top;

    $(element).attr('title', 'Required field')

        .attr('rel', 'div[id="ValidationMessageDiv"]')

        .cluetip({

            local: true, cursor: 'pointer',

            cluetipClass: 'jtip', width: '150', //sticky:'true',

            arrows: true, dropShadow: false, hoverIntent: false

        });

    firstErrorElement.focus();

}

function removeCallOut() {

    $('.ui-state-error').unbind('focus.cluetip');

    $('.ui-state-error').removeClass('jt ui-state-error').removeAttr('message')

        .removeAttr('rel').removeAttr('title');

} 

I just made the showCallOut function a bit intelligent, so that if a form has 10 mandatory fields, it will add "ui.state.error" class to every control (Remember? This class is jQuery ThemeRoller's class for highlighting error controls). By default the first control will be focussed and callout comes out. If you switch the focus to another control, the callout disappears for first control and reappears for second control.

If you want to remove the callout after validating the field, just use the removeCallOut() function.

This is just an idea for those who are struggling with similar requirement. I will try to come up with a demo so that it would be more clear.