Skip to main content

How to validate form field using Jquery in asp.net

In this post i am going to show how to validate form field using Jquery in asp.net aspdotnetcodebook
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="scripts/jquery.js" type="text/javascript"></script>

    <style type="text/css">
        .label
        {
            float: left;
            width: 120px;
        }
        .textbox
        {
            width: 200px;
        }
        .error
        {
            color: red;
            padding-left: 10px;
        }
        div
        {
            padding: 5px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.error').hide();
            $('#btnLogin').click(function(event) {
                $('.textbox').each(function() {
                    var data = $(this).val();
                    var len = data.length;
                    if (len < 1) {
                        $(this).parent().find('.error').show();
                    }
                    else {
                        $(this).parent().find('.error').hide();
                    }
                });
                event.preventDefault();
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <body>
            <div>
                <span class="label">User Id *</span>
                <asp:TextBox ID="txtUserName" runat="server" CssClass="textbox"></asp:TextBox>
                <span class="error">This field cannot be blank</span></div>
            <div>
                <span class="label">Password *</span><asp:TextBox CssClass="textbox" ID="txtPassword"
                    TextMode="Password" runat="server"></asp:TextBox><span class="error"> This field cannot
                        be blank</span></div>
            <asp:Button ID="btnLogin" runat="server" Text="Login" />
        </body>
    </div>
    </form>
</body>
</html>

Comments

Popular posts from this blog