Validation in Asp.Net Controls Using JQuery

05:07:00  , ,  No comments

Validation in Asp.Net Controls Using JQuery

 Using Asp.Net Control   Textbox,Dropdownlist,Checkbox Validating The JQuery 

              Download Coding
                          Download

                     DEMO

              HTML CODING

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Validation in Asp.Net Controls Using JQuery</title>
     <link href="Valid.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"
        charset="utf-8"></script>
    <script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/jquery.validationEngine.js"
        charset="utf-8"></script> 
   
    <script type="text/javascript">
        function FDate(field, rules, i, options) {
            var Valdat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
            if (!Valdat.test(field.val()))
            {
                return "Please Enter  dd/MM/yyyy format Date"
            }
        }
    </script>
 
     <script type="text/javascript">
        $(document).ready(function () {
            $("#form1").validationEngine();
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
   <div>
       <br />
       <br />

       <table>
           <tr><td>
               <asp:Label ID="Label1" runat="server" Text="Username"></asp:Label>
               </td><td>
<asp:TextBox ID="txtName" runat="server"  Class="validate[required]" Height="30px" ></asp:TextBox>
                   <br />
                   <br />
               </td></tr>
           <tr><td>
               <asp:Label ID="Label2" runat="server" Text="Age"></asp:Label>
               </td><td>
<asp:TextBox ID="txtage" runat="server" Class="validate[required]"  minlength="2" Height="30px"></asp:TextBox>
                   <br />
                   <br />
                   <br />
               </td></tr>
           <tr><td>
               <asp:Label ID="Label3" runat="server" Text="Email Id"></asp:Label>
               </td><td>
<asp:TextBox ID="txtEmail" runat="server" Class="validate[required,custom[email]]" Height="30px"></asp:TextBox>
                   <br />
                   <br />
               </td></tr>
           <tr><td>
               <asp:Label ID="Label4" runat="server" Text="Mobile Number"></asp:Label>
               </td><td>
        <asp:TextBox ID="txxMobile" runat="server" Class="validate[required,custom[number],minSize[10],maxSize[10]]" Height="30px"></asp:TextBox>
                   <br />
                   <br />
               </td></tr>
           <tr><td>
               <asp:Label ID="Label5" runat="server" Text="Gender"></asp:Label>
               </td><td>

       <asp:DropDownList ID="DropDownList1" runat="server" Class="validate[required]" Height="30px" >
           <asp:ListItem Text="Select Gender" Value=""></asp:ListItem>
           <asp:ListItem Text="Male" Value="male" ></asp:ListItem>
           <asp:ListItem Text="Female" Value="female"></asp:ListItem>
       </asp:DropDownList>

               </td></tr>
           <tr><td>
               <asp:Label ID="Label6" runat="server" Text="Password"></asp:Label>
               </td><td>
<asp:TextBox ID="txtPass" runat="server"  Class="validate[required]" Height="30px"></asp:TextBox>
                   <br />
                   <br />
               </td></tr>
           <tr><td>
               <asp:Label ID="Label7" runat="server" Text="Confirm Password"></asp:Label>
               </td><td>
<asp:TextBox ID="txtRePass" runat="server" Class="validate[required,equals[txtPass]]" Height="30px"  ></asp:TextBox>
                   <br />
                   <br />
               </td></tr>
           <tr><td>
               <asp:Label ID="Label8" runat="server" Text="Website Url"></asp:Label>
               </td><td>
<asp:TextBox ID="txtUrl" runat="server" class="validate[required,custom[url]]" Height="30px">http://</asp:TextBox>
                   <br />
                   <br />
               </td></tr>
           <tr><td>
               <asp:Label ID="Label9" runat="server" Text="Date"></asp:Label>
               </td><td>
        <asp:TextBox ID="txtDate" runat="server" Class="validate[required,funcCall[FDate[]] " Height="30px"></asp:TextBox>
                   <br />
                   <br />
               </td></tr>
           <tr><td>
               <asp:Label ID="Label10" runat="server" Text="Agreement"></asp:Label>
               </td><td>
<input class="validate[required] checkbox" type="checkbox" id="chkAgree"  name="agree" height="30"/><br />
               </td></tr>
           <tr><td colspan="2<asp:Button ID="btnSubmit" runat="server" Text="submit" />
               </td><td>
       </table>
       </div>
</form>

</body>
</html>



First Add New WebForm - Add Require Controls From ToolBox  





 Next - Add AjaxGoogleApi - Add Css File & Call Every Control From JQuery Class




Every Controls Add Requierd & Expression Add For CssClass








0 comments:

Post a Comment