In this post i am going to show how to validate form field using Jquery in asp.net
<%@ 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>
No comments:
Post a Comment