How can jquery validation asp.net with c#

Amit Kannaujia February 07, 2020

In this example we will explain the basics and widely used jQuery validation in ASP.Net Web Form. Using a library to do form validations can save much of your development time. The jQuery Form validation library is the most popular validation library and I think one of the easiest libraries to use in web forms.

 








  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="validate.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>   
<!--include jQuery Validation Plugin-->  
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>  
       <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
                    }
                }, messages: {
                    <%=txtUserName.UniqueID %>:{
                        required: "Plaese enter your name",
                        minlength: "User name must be atleaet of 5 characters"
                    },
                    <%=txtPassword.UniqueID %>:{
                        required: "Plaese enter your password",
                        minlength: "Password must be atleaet of 5 characters"
                    },
                    <%=txtEmail.UniqueID %>:{
                        required: "Plaese enter your Email Id",
                    }                
                }
            });
        });
    </script>
</head>
<body>
     <form id="form1" runat="server">

    <table width="50%" cellpadding="2" cellspacing="4" style="border: solid 1px navy;
        background-color: #d5d5d5;">
        <tr>
            <td colspan="2" align="center">
                <b>Validation Example using JQuery</b>
            </td>
        </tr>
        <tr>
            <td align="right" width="75px">
                User Name :
            </td>
            <td>
                <asp:TextBox ID="txtUserName" runat="server" Width="180px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td align="right">
                Password :
            </td>
            <td>
                <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="180px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td align="right">
                Email Id :
            </td>
            <td>
                <asp:TextBox ID="txtEmail" runat="server" CssClass="email" Width="180px"></asp:TextBox>
            </td>
        </tr>   
        <tr>
            <td align="right">
                &nbsp;
            </td>
            <td align="left">
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>






Tags
Reactions

Post a Comment

0 Comments