One of the other features of the RadInput textboxes, including textboxes initialized by the RadInputManager, is their client-side API. Like most of the RadControls for ASP.NET AJAX, RadInput boasts a client-side API that is nearly identical to the server-side model. This enables us to create some very rich experiences when validating our users input. I decided to use the client-side API of RadInput with the client-side API of RadToolTip to enhance my input validation experience to automatically display a tool tip when my users make an input error. Let's see how it works...
Let's say you have a form with a bunch of textboxes. Some of the textboxes should only accept numbers. Some only date information. Some only information that matches a RegEx pattern (like email). Wouldn't it be great if you could, A) automatically add validation to these textboxes, B) provide visual feedback when the users enter bad values (in real-time), and C) display a rich tool-tip if the users have trouble meeting your validation rules?
To solve this problem, you need a RadInputManager, a RadToolTipManager, and a few standard ASP.NET textbox controls. By using the Manager controls instead of individual RadInput or RadToolTip controls, our page will be highly optimized to handle 5 or 500 inputs. For today's test, though, here's what my simple test page looks like:
The first thing we need to do is add validation to our TextBox controls. That can be done using the RadInputManager, much in the way you may have used RadAjaxManager in the past to ajaxify your project. The InputManager has both a design-time wizard that makes configuration as easy as a few clicks and rich IntelliSense support for configuration via code. Whichever way you configure the RadInputManager, you'll end-up with the same markup. To support our scenario, the markup will look like this:
A few things to note about this code:
With just these settings, my plain old ASPNET textboxes will already provide rich visual feedback and validation. I don't have to write any more code. Here's what the standard validation looks like:
Notice that by default, only the RegEx textbox enables you do display an error message. The numeric and date inputs simply convey that the data is invalid (numeric data is checked real-time, so you cannot enter non-numeric values). Let's improve this default by adding ToolTips that are displayed when the RadInput OnError event is fired. For the real-time numeric input control, let's display our tip if the user triggers 3 errors (or in other words, the user tries 3 times to enter non-numeric values). We could display the tip on the first error, but we'll assume that one mistake doesn't warrant a ToolTip, but three mistakes means the user may be confused and need ToolTip help.
At the end of each of these methods, you see a call to "showErrorTip(ele, errMsg)." That is another function on the page that accepts an HTML DOM Element and a string message and then displays a RadToolTip with the supplied message attached to the supplied DOM element. To make this work, we first need a RadToolTipManager on the page:
Here we simply get a reference to the RadToolTipManager client-side object, create a ToolTip for the supplied HTML element, set the Tip's contents, and then display it on the page (done via the "tooltip.show()" call). We could have also moved the "AutoCloseDelay" to the RadToolTipManager definition, but I've left it here so you can see that the ToolTip API gives you lots of control.
To hide the ToolTips, we'll handle the RadInput's OnKeyPress client event. This event fires- as the name implies- whenever a key is pressed in a RadInput control. In our event handler (which is the same for all of our input controls, regardless of type), we'll simply close any open RadTips when the user starts typing, like this:
Subscribe to be the first to get our expert-written articles and tutorials for developers!