Saturday, 14 December 2013

Validate textbox in jquery using asp.net / how to validate empty textbox in jquery

Posted by trackmyblog.com on 09:48 in

Introduction:

This article is helps to how to check/Validate Username and Password for login screen using jquery.


 If username and password is given for blank click login button show alert message in jquery

 Designing Page (Source Code):

 <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Asp Basic Login</title>
    <script src="../../jquery-1.9.1.js" type="text/javascript"></script>
    <style type="text/css">
        .Mandatory
        {
            float: left;
            background-color: Transparent;
            color: red;
            display: inline-block;
            height: 15px;
            margin-left: -10px;
            margin-top: 5px;
            width: 10px;
        }
         
        .Column
        {
            width: 98.5%;
            display: inline-block;
            padding: 5px;
        }
       
        .Column span
        {
            width: 15%;
            float: left;
            padding: 3px;
        }
       
        .Column input[type="text"], .Column input[type="password"]
        {
            width: 25%;
            float: left;
            margin-right: 10px;
        }
       
        .Column input[type="submit"]
        {
            float: left;
            margin-top: -1px;
        }
    </style>
    <script type="text/javascript">
        function ValidateButton() {
            if ($.trim($('#<%= txtUserName.ClientID %>').val()) == "") {
                alert("User Name Required");
                $('#<%= txtUserName.ClientID %>').focus()
                return false;
            }
            else if ($.trim($('#<%= txtpassword.ClientID %>').val()) == "") {
                alert("Password Required");
                $('#<%= txtpassword.ClientID %>').focus()
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="Column">
            <asp:Label ID="lblUserName" runat="server" Text="User Name"></asp:Label>
            <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
            <span class="Mandatory">*</span></div>
        <div class="Column">
            <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
            <asp:TextBox ID="txtpassword" TextMode="Password" runat="server"></asp:TextBox>
            <span class="Mandatory">*</span></div>
        <div class="Column" style="padding-left: 150px">
            <asp:Button ID="btnLogin" runat="server" BorderColor="Aqua" OnClientClick="javascript:return ValidateButton()"
                Text="Login" /></div>
    </div>
    </form>
</body>
</html>

 Demo:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)