Allowing Only Numbers in ASP. NET TextBoxes

Introduction

ASP.NET validation controls provide basic web form validations. In some cases you need more control on the validation process. CustomValidator control lets you take charge of the validation process. You can wire up your own client side JavaScript with CustomValidator. In this article we will see how to use CustomValidator control to allow only numbers in an ASP.NET textbox.

Why go for CustomValidator instead of writing "stand alone" JavaScript function

You might think - we are anyway using CustomValidator and writing a client side function on our own then why not use your own "stand alone" function? By "stand alone" I mean a JavaScript function that is directly attached with an ASP.NET control through Attributes collection and not via CustomValidator control. There are few reasons:

• You need not manually wire up a JavaScript function with an ASP.NET control
• You can take advantage of same programming model as of the rest of validation controls
• Your validation failure is easily displayed in ValidationSummary control
• With CustomValidator you can also get chance to write server side validation.

How CustomValidator works?

CustomValidator control has a property called ClientValidationFunction. This property needs to be set to a client side JavaScript or VBScript function that will perform the validation for you. Note that EnableClientScript property must be true for this to work (by default it is true). The general syntax of the function is like this:

<script>
function Function1(source,arguments)
{
...
}
</script>

Here, the arguments parameter contains a property called IsValid that needs to be set to true or false. If you set it to false then ASP.NET treats as if validation has failed and error message is displayed accordingly.

Example - Allowing only numbers in a TextBox

Let's see how we can use CustomValidator to allow only numeric entries in a TextBox.

1. Create a new project in VS.NET of type - ASP.NET Web Application.
2. On the web form drag and drop a TextBox, Label and a Button
3. Add one RequiredFieldValidator, a CustomValidator and ValidationSummary controls.
4. Set ControlToValidate property of both the validation controls to TextBox1
5. Set ErrorMessage property of RequiredFieldValidator to "Field can not be blank"
6. Set ErrorMessage property of CustomValidator to "Only Numbers are Allowed!"
7. Set ClientValidationFunction property to IsNumber. IsNumber is a JavaScript function that we will be writing later on.
8. Write following function in the <script> block:

<script>
function IsNumber(source,arguments)
{
  var ValidChars = "0123456789.";
  var Char;
  var sText=document.getElementById("TextBox1").value;
  for (i = 0; i < sText.length; i++) 
  { 
    Char = sText.charAt(i); 
    if (ValidChars.indexOf(Char) == -1) 
    {
       arguments.IsValid = false;
       return;
    }
  }
  return;
}
</script>

9. In above function we are checking whether entered value contains anything from 0123456789 and . (period). If you wish you could have added more validation as per your requirements.
10. You can now test the validation by entering some alphabets in the TextBox.

You can download and run the complete example attached along with the article.

Summary

ASP.NET CustomValidator allows you take complete control of the validation process. You can attach a client side JavaScript or VBScript function to CustomValidator that takes care of your validation. In our example we provided a function that ensures that entered value in number only.