Saturday, February 26, 2011

Client Side validations using JavaScript in ASP net Web Applications



Hi friends In this article I would like to explain the client side validations for our web applications. We have already predefined server side validations but its better to use client side validations to decrease the burden on server. So Lets have a look about the client side validations for all the controls. Here I am going to explain client side validations in two ways



1. Individual validation for each control

2. Form validation for all the controls



Individual validation for each control

Write the below JavaScript code in the Head section of the page

For Validating Empty Text Box:

<asp:TextBox ID="txt_ename" name="txt_ename" runat="server" onkeyup="empname()" onpaste = "return false;" Width="150px"></asp:TextBox>

Javascript code :

<script type="text/javascript">

function empname()
{
 if ( form1.txt_ename.value !="")
    {
       form1.txt_ename.value="";
       form1.txt_ename.focus();
       alert(" EmployeeName cannot be blank");
       return false;
    }
}     

</script>

Validating the Text Box for accepts only alphabets:

<asp:TextBox ID=" txt_designation " name="txt_ designation " runat="server" onkeyup=" desgination ()" onpaste = "return false;" Width="150px"></asp:TextBox>


Javascript code :

<script type="text/javascript">

function desgination()
{
 if (!form1.txt_designation.value.match(/^[a-zA-Z]+$/) && form1.txt_designation.value !="")
    {
       form1.txt_designation.value="";
       form1.txt_designation.focus();
       alert("Please Enter Desgination in alphabets");
       return false;
    }
</script>

Validating the Text Box for accepts only digits:

<asp:TextBox ID=" txt_salary " name=" txt_salary " runat="server" onkeyup=" salary()" onpaste = "return false;" Width="150px"></asp:TextBox>

Javascript code :

<script type="text/javascript">

function salary()
{
 if (!form1.txt_salary.value.match(/^[0-9]+$/) && form1.txt_salary.value !="")
    {
       form1.txt_salary.value="";
       form1.txt_salary.focus();
       alert("Please Enter salary in Digits");
       return false;
    }
}
</script>

Confirmation msg for deleting a Record

<asp:CheckBox ID="deleteRec" onclick="return check_uncheck (this );"
                                            runat="server" />

Javascript code :

<script type="text/javascript">

function confirmMsg(frm)
{
  // loop through all elements
  for (i = 0; i < frm.length; i++)
  {
    // Look for our checkboxes only
    if (frm.elements[i].name.indexOf("deleteRec") !=  - 1)
    {
      // If any are checked then confirm alert, otherwise nothing happens
      if (frm.elements[i].checked)
      return confirm('Are you sure you want to delete your selection(s)?')
    }
  }
}

</script>


2)Form Validation

In the form validation,the validations will be check only after the submit  button clicked


Javascript code :

<script language="javascript" type="text/javascript">
function validate()
{
      if (document.getElementById("<%=txt_uname.ClientID%>").value=="")
      {
                 alert("UserName Feild can not be blank");
                 document.getElementById("<%=txt_uname.ClientID%>").focus();
                 return false;
      }
      if (document.getElementById("<%=txt_pwd.ClientID%>").value=="")
      {
                 alert("Password Feild can not be blank");
                 document.getElementById("<%=txt_pwd.ClientID%>").focus();
                 return false;
      }
      if (document.getElementById("<%=txt_cpwd.ClientID%>").value=="")
      {
                 alert("Confirm Passowrd Feild can not be blank");
                 document.getElementById("<%=txt_cpwd.ClientID%>").focus();
                 return false;
      }      
     
      if (document.getElementById("<%=txt_age.ClientID%>").value=="")
      {
                 alert("Age Feild can not be blank");
                 document.getElementById("<%=txt_age.ClientID%>").focus();
                 return false;
      }
      if(document.getElementById("<%=txt_email.ClientID %>").value=="")
      {
                 alert("Email id can not be blank");
                document.getElementById("<%=txt_email.ClientID %>").focus();
                return false;
      }
     var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
     var emailid=document.getElementById("<%=txt_email.ClientID %>").value;
     var matchArray = emailid.match(emailPat);
     if (matchArray == null)
    {
               alert("Your email address seems incorrect. Please try again.");
               document.getElementById("<%=txt_email.ClientID %>").focus();
               return false;
    }
    if (document.getElementById("<%=txt_mobile.ClientID%>").value=="")
     {
               alert("Mobile No is not valid");
               document.getElementById("<%=txt_mobile.ClientID%>").focus();
               return false;
     }
     var digits=/^([0-9]{10})$/;
     var digitsid=document.getElementById("<%=txt_mobile.ClientID %>").value;
      var digitsArray = digitsid.match(digits);
     var temp;
     if (digitsArray == null)
    {
               alert("Your mobile seems incorrect. Please try again.");
               document.getElementById("<%=txt_mobile.ClientID %>").focus();
               return false;
    }
    
    return true;
}
</script>


For submit button :

<asp:Button ID="btn_sub" runat="server" Font-Names="Verdana" Text="Submit" onclick="btn_sub_Click" Width="77px" OnClientClick=" return validate()"/>

That’s it. Friends.
developercode
About the Author
Sayyad is a Software Engineer, Blogger and Founder of Developers Code from India.His articles mainly focus on .Net (Web and Windows based applications), Mobile Technologies (Android,IPhone,BlackBerry) and SEO.

Labels: , , , ,

5 Comments:

At March 12, 2011 at 9:31 AM , Anonymous Javascript Countdown Timer said...

very cool & good js tips for beginners, thank you very much for sharing.

 
At March 14, 2011 at 9:47 AM , Blogger Developers Code said...

Welcome...

 
At June 28, 2011 at 10:16 AM , Anonymous Tanisha said...

Welcome...

 
At October 11, 2011 at 5:04 PM , Anonymous Anonymous said...

if i want to drop down list box to select any one items means wat we do

 
At January 28, 2015 at 8:41 PM , Anonymous Anonymous said...

great work

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home