Welcome to another AJAX tutorial, today we will be demonstrating how to use the ValidatorCallout extender

So let’s talk a little bit about Validators and the AJAX Control ValidatorCallout,

Ever visited a site or you were signing up to your favorite social network and you forgot to add a certain piece of information such as an email or phone number? And you got a message box saying, for example you must fix this issue before you can continue? Well those are Validators and or Validator Call outs.

In this tutorial we will be demonstrating a short and simple example on how you can AJAXify your ASP.NET Validators using Visual Studio 2010 and in C#.

Lets begin building our form.

Let’s open a new web form in Visual Studio 2010 and we can begin adding tool script manager to our page in design view.

Next up is we made a table; yes we used a table, but only for this example. 4 cells 2 x 2, it’s not so bad.

So our first table will be our “name” section and next to that we inserted a TextBox and named it NameTextBox.

Our next rows are so they can input the Phone number that we will validate. We gave it an ID of PhoneNumberTextBox. Below is the markup for the table:

So now we are going to validate our name Textbox. So we are going to add a Required Field Validator from our ASP Tools, we set the error message to display Required Field Missing a Name is required.

Now we added a Validator Callout Extender that will pop up and display the message asynchronously via Ajax from our server validation control. Below is the mark up:

Now let’s validate our Phone Number TextBox pretty much the same process but we used some simple RegEx to validate the numbers. Below is the markup :

As you can see we used some RegEx to validate the phone number and then set our validation call out extender to target the RegEx validator once it is correct and then display the message if it is correct or not.

Now we can add our Button to submit this form. So double click our ASP button and let’s set a message to display in an update panel that the form was successfully submitted.

Here is the Markup for the Button:

Now in our code behind we simply called the label inside of the update panel to display a thank you message:

Now let’s load our page and it should look something like this.

Thank you for reading our tutorial on AJAX Controls, We Aim to provide the best Tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a Tutorial or you can comment below in the comments section.

Download Source Files