The Ajax Control Toolkit contains a number of control extenders to restrict input from the user. Two are the Filtered Textbox Extender and the MaskEdit Extender.

WARNING – In a web application, restricting user input in the browser DOES NOT SECURE YOUR WEB APPLICATION. To insure that you application is secure you MUST insure the safety of user input in the server-side code !

The jQuery ecosystem has many plugins available to control user input and in the code below I’ve selected two to simulate the Ajax Control Toolkit extenders listed above.

Here’s what our UI will look like.

Lets look at the code :


[sourcecode language=”html”]
<%@ Page Title=’Home Page’ Language=’C#’ MasterPageFile=’~/Site.master’
AutoEventWireup=’true’ CodeFile=’Default.aspx.cs’
Inherits=’_Default’ %>

<asp:Content ID=’HeaderContent’ runat=’server’
ContentPlaceHolderID=’HeadContent’>
<script src=’Scripts/jquery-1.4.1.js’ type=’text/javascript’></script>
<script src=’Scripts/jquery.filter_input.js’ type=’text/javascript’>
</script>
<script src=’Scripts/jquery.maskedinput-1.3.js’ type=’text/javascript’>
</script>
</asp:Content>
<asp:Content ID=’BodyContent’ runat=’server’
ContentPlaceHolderID=’MainContent’>
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit
<a href=’http://www.asp.net’ title=’ASP.NET Website’>www.asp.net</a>.
</p>

<input id=’text_input_1′ type=’text’ /> <- Numbers Only.<br /><br />
<input id=’text_input_2′ type=’text’ /> <- Lower Case Letters.
<br /><br />
<input id=’text_input_3′ type=’text’ /> <- URL safe characters.
<br /><br />
<hr />
<input id=’date’ type=’text’ /> <- Date.<br /><br />
<input id=’phone’ type=’text’ /> <- Phone.<br /><br />
<input id=’ssn’ type=’text’ /> <- Social Security Number.<br /><br />
<input id=’otherphone’ type=’text’ /> <- Phone.<br /><br />

<script type=’text/javascript’>
$(function () {
// only numbers are allowed
$(‘#text_input_1’).filter_input({ regex: ‘[0-9]’ });

// only lowercase alphabets are allowed
$(‘#text_input_2’).filter_input({ regex: ‘[a-z]’ });

// only URL safe characters are allowed
$(‘#text_input_3’).filter_input({ regex: ‘[a-zA-Z0-9_]’ });

$(‘#date’).mask(’99/99/9999′);
$(‘#phone’).mask(‘(999) 999-9999’);
$(‘#ssn’).mask(‘999-99-9999’);
$(‘#otherphone’).mask(‘(999) 999-9999’, { placeholder: ‘x’ });
});
</script>
</asp:Content>
[/sourcecode]


The first three textboxes are “filtered” do that when the user presses a character key that is not one of the set specified in the filter’s regular expression, that key will be ignored.

Since the jQuery Filter Extender is Regular Expression based, you can get much more advanced in controling usert input by writing your own regular expressions.

The second set are “masked”. The textbox will guide the user through a template like the “phone number” input below.

Why use a free form text box when the input needs to be specifically tailored to a particular format?