Guiding User Input with the JQuery Masked Edit Plugin :Thin ASP.NET Part 4
Yesterday I walked through applying the JQuery Validation plugin to an ASP.NET web page. Today I want to extend the concept of guiding user input as they complete an online form by demonstrating the JQuery Masked Edit plugin. The ASP.NET AJAX Control Toolkit contains over 30 AJAX enable controls and web control extenders. One of those controls is the MaskEdit Control Extender. By adding it to your ASP.NET Web Form and pointing it to a TextBox control you can apply an input mask to the TextBox and ‘guide’ the user’s input. When you apply an input mask to an input control you are helping them understand the proper format for the data you are requesting. In case you have not read yesterday’s entry, I want to emphasize that driving correct user input is very important to having a successful web form.
In the contact form we have been working with there are two fields that masked input are useful; the Zip Code and the Phone Number. Each have known formats, and I am using the US formats for both. The JQuery Masked Edit plugin invokes the desired masked for the input field as soon as it gains focus, i.e. the user either tabs to the field or clicks the mouse in the field.
In the above screen snippet the zip code is filled in, but as you type it only accepts numbers and only 5, no more. As you are typing numbers an underscore is displayed in the remaining space.
The phone number mask, displayed above, does the same thing in that it only allows numerical inputs and uses the underscore as a placeholder. There are several common acceptable formats for a US phone number. The format displayed above uses parentheses to offset the area code and a dash to separate the local exchange from the number.
Applying the Masked Edit plugin is pretty straight forward. Just like I did to apply the validation routines to the input fields I am also going to define a class selector for the particular field. To keep things unique I decided to add a ‘Mask’ suffix to the class selector name. For the two examples in this sample I call them ‘ZipCodeMask’ and ‘PhoneMask’. I could have leverages the same CSS selector name (phone for example) the Validation plugin uses, but I want to emphasize this application for demonstration purposes.
<p>
<label id="lblZip" for="txtZip">
Zip :
</label>
<input name="txtZip" type="text" class="ZipCodeMask"/>
</p>
<p>
<label id="lblPhone" for="txtPhone">
Phone :
</label>
<input type="text" name="txtPhone" class="phone PhoneMask"/>
</p>
All that is left is to actually assign the rules within the $.ready function. I want to extend the use of selecting DOM elements using JQuery by assigning the mask rules only to input elements with the two class selectors I defined earlier. This is done by referencing all elements like $(‘input.PhoneMask’). Therefore if there were more than one phone number field on the page they would all have the same mask applied. Using the input type also limits the application of the mask to only input fields, which should be a given. I could have just references the ‘PhoneMask’ selector and the result would have been the same, but I wanted to demonstrate a little more advanced technique. ;).
The Masked Edit plugin adds a ‘mask’ function to the DOM elements. It accepts the mask as an argument and will apply it to the elements that match the selector criteria.
$("input.PhoneMask").mask("(999) 999-9999");
$("input.ZipCodeMask").mask("99999");
While these two masks both make use of numbers you are not limited to numerical input. An ‘a’ is used to indicate an alphabetical character, ‘9’ numerical and ‘*’ for any alpha-numeric character. Optionally you can define the placeholder character by passing it in to the mask function:
$("#product").mask("99/99/9999",{placeholder:" "});
You can also define a method to be executed with the mask is complete or define your own mask definitions. The Masked edit plugin is very simple to use and will work with both pure HTML elements and ASP.NET Web Controls. Just like I showed yesterday, JQuery selectors are ignorant of a DOM element being the product of a Web Control or just plain old HTML since Web Controls produce plain old HTML in the end. Also style selectors are applied to a Web Control in the CssClass property.
If you have not noticed I keep adding code to the Contact form web site for each demonstration. The Code I added yesterday already had the Masked Edit plugin code applied, so the download is the same for this entry as yesterday’s. The new file is ‘JQueryValidateForm.aspx’.
Download the Code!