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.

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.

Reach Him:

Google+

Facebook

Twitter

Pinterest