Is there any client side validation library that is using tooltips to display validation messages?

Question

I need to include client side validation on one of my forms, and the webdesign did not take into account any space for validation messages.

I think using validation tooltips together with some borders around non-valid input controls would do the job, but I am having problem finding any javascript validation that is using tooltips.

Can anyone recommend a solution? Preferably supporting ASP.NET MVC directly, but this is not a strict requirement, I am ready to customize any javascript solution to suit ASP.NET MVC.

I am using castle validator to do server side validation and MvcValidation (http://blog.codeville.net/2008/04/30/model-based-client-side-validation-for-aspnet-mvc/) solution on client side, which uses LiveValidation. This works very nice, but needs some customization to not display the validation messages next to controls.

Answer 1

The jQuery Validation library is one of the most popular choices. For your question, you can override is the errorPlacement call like this:

$('formName').validate({ 
  errorPlacement: function(error, element) {     
                    element.attr("title",error.html())
                      .addClass("cssClassWithBorder");
                  }
});

You can read up on the full options list here: Validation plugin options

There are a few toolkits out there, the one most applicable based on your question would be xVal by Steve Sanderson.

Keep in mind that ASP.Net MVC 2 is bringing a lot more to the table in terms of annotations, validation and simplifying the client/server validation duplication of code that's out there now. It's a provider based model and there should be plenty of community providers coming out that may provide more of what you're after.

The default implementation will be based mostly around the jQuery Validation framework (the same as above) in an annotation bubbling way (same attributes way down on the classes for both server and client code)...very similar to how xVal does it. Based on your timelines and flexibility, waiting for MVC 2 may be a better option and less work.

At the time of this answer, MVC 2 RC is the current release for this.

Answer 2

It might be too heavy for your needs, but you might want to take a look at extjs.com as well as jquery if you haven't already.

Answer 3

Dijit's form widgets use popup tooltips as well and are compliant with accessible technologies. Look at the docs for dijit.form.ValidationTextBox for examples.