Wednesday, 28 December 2011

Simple Javascript Validation in Asp.net


Design:

<%@ Page Title="Home Page" Language="C#"  AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html>
  <head>
    <title>
      My Web site
    </title>
    <script language="javascript" type="text/javascript">
        function validate() {
       
            var name = document.getElementById("<%=TxtName.ClientID %>").value;
            if (name == "") {
                alert('Please Enter Name.');
                document.getElementById("<%=TxtName.ClientID %>").focus();            
                return false;
            }
           
            var age = document.getElementById("<%=DdlAge.ClientID%>");
            if (age.value == 0) {
                alert('Please Select Age.');
                age.focus();            
                return false;
            }
       
            var address = document.getElementById("<%=TxtAddress.ClientID %>").value;
            if (address == "") {
                alert('Please Enter Address.');
                document.getElementById("<%=TxtAddress.ClientID %>").focus();            
                return false;
            }
           
            var pin = document.getElementById("<%=TxtPin.ClientID %>").value;
            if (pin == "") {
                alert('Please Enter Pin.');
                document.getElementById("<%=TxtPin.ClientID %>").focus();            
                return false;
            }        
         
            var mobileno = document.getElementById("<%=TxtMobileno.ClientID %>").value;
            if (mobileno == "") {
                alert('Please Enter MobileNo.');
                document.getElementById("<%=TxtMobileno.ClientID %>").focus();              
                return false;
            }          
         
            var email = document.getElementById("<%=TxtEmail.ClientID %>").value;
            if (email == "") {
                alert('Please Enter EmailID.');
                document.getElementById("<%=TxtEmail.ClientID %>").focus();            
                return false;
            }          
        }

        //Pin no Validation
        function PinValidation() {
            var pin1 = document.getElementById("<%=TxtPin.ClientID %>");
            var digits = "0123456789";
            var temp;
            for (var i = 0; i < pin1.value.length; i++) {
                temp = pin1.value.substring(i, i + 1);
                if (digits.indexOf(temp) == -1) {
                    alert("Please enter correct pin code");
                    pin1.value = "";
                    pin1.focus();
                    return false;
                }
            }
        }
            //Mobile no Validation
            function MobilenoValidation() {
                var mobileno1 = document.getElementById("<%=TxtMobileno.ClientID %>");
                var digits = "0123456789";
                var temp;
                for (var i = 0; i < mobileno1.value.length; i++) {
                    temp = mobileno1.value.substring(i, i + 1);
                    if (digits.indexOf(temp) == -1) {
                        alert("Please enter Valid MobileNo.");
                        mobileno1.value = "";
                        mobil.focus();
                        return false;
                    }
                }
            }
            //Email Validation
            function EmailValidation() {
                var email = document.getElementById("<%=TxtEmail.ClientID %>").value;
                var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
                var matchArray = email.match(emailPat);
                if (matchArray == null) {
                    alert("Your email address incorrect. Please Enter Correct Email ID.");
                    document.getElementById("<%=TxtEmail.ClientID %>").value = "";
                    document.getElementById("<%=TxtEmail.ClientID %>").value.focus();
                    return false;
                }
            }

            function checkweburl() {
                var theurl = document.getElementById("<%=TxtWeburl.ClientID %>").value;
                var tomatch = /http:\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{3}/
                var matchurl = theurl.match(tomatch);
                if (matchurl==null) {
                    alert("URL invalid. Try again.");
                    document.getElementById("<%=TxtWeburl.ClientID %>").value = "";
                    document.getElementById("<%=TxtWeburl.ClientID %>").focus();
                    return false;
                }
            }
           
    </script>
  </head>
  <body>
  <form id="iii" runat="server">
    <table align="center" width="100%">
       <tr>
          <td width="100%" align="center" colspan="4">
             <h2>Student Information</h2>
          </td>
       </tr>
       <tr>
         <td width="25%"> </td>
         <td width="25%">Name: </td>
         <td width="25%">
             <asp:TextBox ID="TxtName" runat="server"></asp:TextBox></td>
         <td width="25%"> </td>
       </tr>
        <tr>
         <td width="25%"> </td>
         <td width="25%">Age: </td>
         <td width="25%">
             <asp:DropDownList ID="DdlAge" runat="server"></asp:DropDownList> </td>
         <td width="25%"> </td>
       </tr>
        <tr>
         <td width="25%"> </td>
         <td width="25%">Address: </td>
         <td width="25%">
             <asp:TextBox ID="TxtAddress" runat="server" TextMode="MultiLine"></asp:TextBox> </td>
         <td width="25%"> </td>
       </tr>
       <tr>
         <td width="25%"> </td>
         <td width="25%">Pin: </td>
         <td width="25%">
             <asp:TextBox ID="TxtPin" runat="server" MaxLength="6" onBlur='PinValidation()'></asp:TextBox> </td>
         <td width="25%"> </td>
       </tr>
       <tr>
         <td width="25%"> </td>
         <td width="25%">Mobile No: </td>
         <td width="25%">
             +91-<asp:TextBox ID="TxtMobileno" runat="server" MaxLength="10" onBlur='MobilenoValidation()'></asp:TextBox> </td>
         <td width="25%"> </td>
       </tr>
        <tr>
         <td width="25%"> </td>
         <td width="25%">Email: </td>
         <td width="25%">
             <asp:TextBox ID="TxtEmail" runat="server" onBlur='EmailValidation()'></asp:TextBox>Ex.abc@dd.com </td>
         <td width="25%"> </td>
       </tr>
       <tr>
         <td width="25%"> </td>
         <td width="25%">Web Address: </td>
         <td width="25%">
             <asp:TextBox ID="TxtWeburl" runat="server" onBlur='checkweburl()'></asp:TextBox>Ex.http://www.abc.com </td>
         <td width="25%"> </td>
       </tr>
       <tr>
          <td width="100%" align="center" colspan="4">
              <asp:Button ID="BtnSubmit" runat="server" Text="Submit"
                  OnClientClick="return validate()" onclick="BtnSubmit_Click" />&nbsp;&nbsp;&nbsp;&nbsp;<asp:Button
                  ID="BtnCancel" runat="server" Text="Cancel" onclick="BtnCancel_Click" />
          </td>
       </tr>
    </table>
    </form>
  </body>

</html>


Page View:




No comments:

Post a Comment