Go to DotNetFunda.com
 Welcome, Guest!  
LoginLogin  
{ Submit content and get exposure !!! }
Submit: Article | Interview Question | Tips | Joke | Question | Link || Search  
 Skip Navigation Links Home > Articles > ASP.NET Client Side TextBox Validation

All Articles | Post Articles |  Subscribe to RSS

ASP.NET Client Side TextBox Validation

 Posted on: 7/30/2008 4:41:09 AM by Majith | Views: 2393 | Category: JavaScript | Level: Beginner | Print Article
ASP.NET Hosting with Windows 2008/2003
Like most programming tasks, client validation can be as simple or as more complex .In this article I am going to explain the Client Side Texbox Number/Characters Validation with JavaScript .


ASP.NET Client Side TextBox Validation

Like most programming tasks, client validation can be as simple or as more complex . Consider Employee Payroll Form , I am having Emp name, Salary, Address ,etc.

If any user trying to enter the characters into salary (Textbox) mean’s, It does'nt accepts the characters and it will show alert message and if trying to enter numbers into Emp Name Field also it will raise alert messages respectively.

The steps is as follow:

  1. Open New Website,
  2. Drag two Textboxes  from  toolbox (Web controls) and one asp.met Button control.
  3. Wite the following code in  html (Inlinecode).

 


 <script language="javascript">

// Function to validate numbers
function clickButton(e)
{
          if(navigator.appName.indexOf("Netscape")>(-1)){
                 if (e.keyCode == 13){
                       bt.click();
                       return false;
                 }
           }
           if (navigator.appName.indexOf("Microsoft Internet Explorer")>(-1)){
                 if (event.keyCode < 48 || event.keyCode > 57){
                       //bt.click();
                       alert("Enter Numbers Only");
                       return false;
                 }
                 if(event.Length>3)
                 {
                  alert("Number Should be between 1 and 999")
                 }
           }
     }
    

// Function to validate characters/alphabets
function clickButton1(e1)
{
         if(navigator.appName.indexOf("Netscape")>(-1)){
                 if (e1.keyCode == 13){
                       bt.click();
                       return false;
                 }
           }
           if (navigator.appName.indexOf("Microsoft Internet Explorer")>(-1)){
                 if (event.keyCode < 97 || event.keyCode > 122){
                       //bt.click();
                       alert("Enter Characters Only");
                       return false;
                 }
                
           }
          
     }
</script>

Then in the CodeBehind File add the following  procedure.

    ' attach the "number" javascript function to the textbox
    Public Sub numbers(ByVal txtbox As System.Web.UI.WebControls.TextBox)
        txtbox.Attributes.Add("onkeypress", "return clickButton(event)")
    End Sub

' attach the "test" javascript function to the textbox
    Public Sub test(ByVal txtbox1 As System.Web.UI.WebControls.TextBox)
        txtbox1.Attributes.Add("onkeypress", "return clickButton1(event)")
    End Sub

Then call this procedures (Numbers ,test) In the Page Load Event.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

' here "salary" is the id of the textbox, same applies to all procedures
numbers(salary)
      numbers(mobileno)

      numbers(homephone)

test(EmpName)
      test(Address)

End Sub

In this way we are attaching our function to the onkeypress event of the textbox that will fire when user will press any key in these textboxes.

Surely this example will help in client side validation.

Happy coding.


Interesting?  Bookmark and Share kick it on DotNetKicks.com


About Majith B

Experience:3 year(s)
Home page:
Member since:Friday, July 18, 2008
Biography:
 Latest post(s) from Majith

   ◘ Java Script GridView ClientSide Validation posted on 9/30/2008 12:22:12 AM
   ◘ Diff Between DataGrid and GridView posted on 9/17/2008 11:20:35 PM
   ◘ Dynamic Single click , Double Click for Editing the rows in Gridview posted on 9/10/2008 11:44:57 PM
   ◘ Applying Themes and Skins using ASP.NET ,C# posted on 8/21/2008 3:24:56 AM
   ◘ Dynamic Menu using XML DataSource ASP.NET ,VB.NET posted on 8/6/2008 10:55:31 PM




About Us | Contact Us | Privacy Policy | Terms of Use | Link Exchange | Members | Go Top
All rights reserved to DotNetFunda.com. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks.
(Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher)