Web Page Validation using JQuery in ASP.NET

jQuery is one of the most popular JavaScript frameworks that have powerful tools for developers to improves the designs integration with web sites and applications. We have discussed earlier about the website Validation. You can validate your web page using the Validator Controls or by writting code. Today I will tell you to validate your web page using jQuery.

Free Download

jQuery Validation : Demo Project

Controls and Properties:

1. Web Form: name=”Validation.aspx”.

2. TextBox: id=”txtUserName”.

3. TextBox: id=”txtPassword”.

4. TextBox: id=”txtEmail”.

5. TextBox: id=”txtURL”.

Validation.aspx

Source code:

<b>Validation Example using JQuery</b>
   User Name :

 <asp:TextBox ID="txtUserName" runat="server" Width="180px"></asp:TextBox>

   Password :

 <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="180px">

 </asp:TextBox>
   Email Id :

 <asp:TextBox ID="txtEmail" runat="server" Width="180px"></asp:TextBox>
   URL :

 <asp:TextBox ID="txtURL" runat="server" Width="180px"></asp:TextBox>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

JavaScript Code to use jQuery LightBox:

<script type="text/javascript" src="script/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="script/jquery-latest.js"></script>
    <script type="text/javascript" src="script/jquery.validate.js"></script>
<%--this javascriptis used to show the message after valid statement.--%>
    <script type="text/javascript">
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        }); ;
    </script>
<%--write the following javascript for passing the parameter for jquery--%>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#form1").validate({
                rules: {
                    <%=txtUserName.UniqueID %>: {minlength: 5,required: true},
                    <%=txtPassword.UniqueID %>: {minlength: 5,required: true},
                       <%=txtEmail.UniqueID %>: {required: true},
                         <%=txtURL.UniqueID %>: {required: true}
                }, messages: {
                    <%=txtUserName.UniqueID %>:{required: "Full Name"},
                    <%=txtPassword.UniqueID %>:{required: "valid password"},
                       <%=txtEmail.UniqueID %>:{ required: "valid Email Id"},
                         <%=txtURL.UniqueID %>:{ required: "Website URL"}
                                   }
            });
        });
    </script>