Invalid Phone Number

This example uses a C1MaskedInput control with the Phone number mask: (999) 000-0000. If the user enters anything less than the required 10-digit phone number, an alert box will appear.

To display an alert box for an incomplete phone number, complete the following steps:

1.   Select the Input for ASP.NET AJAX control, in this case, C1MaskedInput. Note that for this example the ID property for the control was changed to _PhoneNumber.

2.   From the Properties window, locate the client-side event, OnClientBlur.

3.   Click the OnClientBlur drop-down arrow and select Add New Client Side Handler.

4.   Your screen will automatically change to Source view and highlight the new function. Enter the following code inside the OnClientBlur function (replacing the code comment which is automatically inserted):

 

// Get text without prompts and literals:

var sText = aC1Edit.get_Text();

 

// Remove all spaces from text:

sText = sText.replace(' ','');

 

// Full phone number must be 10 characters length:

if(sText.length < 10)

alert("You must enter a valid phone number!");

This topic illustrates the following:

Run the project. Begin typing the phone number and leave the input control before entering the entire 10-digit number, and you will receive an alert box:

 


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.