<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Finance.aspx.cs" Inherits="Finance" %> <!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>jQuery Validation Demo</title> <style type="text/css"> .style1 { width: 100%; } .style3 { width: 68px; } </style> <script type="text/javascript" src="Scripts/jquery-2.0.2.js"></script> <script type="text/javascript" src="Scripts/jquery-ui-1.10.3.js"></script> <script type="text/javascript" src="Scripts/jquery.validate.js"></script> <script type="text/javascript"> $(function () { $('#form1').validate({ rules: { txtFirstname: { required: true }, txtLastname: { required: true }, txtCity: { required: true }, txtDesignation: { required: true } }, messages: { txtFirstname: { required: "Enter First Name" }, txtLastname: { required: "Enter Last Name" }, txtCity: { required: "Enter City" }, txtDesignation: { required: "Enter Designation" } }, highlight: function (element) { $(element).closest('.control-group').removeClass('success').addClass('error'); }, success: function (element) { $(element).text('OK!').addClass('valid').closest('.control-group').removeClass('error').addClass('success'); } }); }); </script> <link href="Styles/StyleSheet.css" rel="Stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div class="control-group"> <table class="style1"> <tr> <td class="style3"> First Name</td> <td> <asp:TextBox ID="txtFirstname" runat="server"> </td> </tr> <tr> <td class="style3"> Last Name</td> <td> <asp:TextBox ID="txtLastname" runat="server"> </td> </tr> <tr> <td class="style3"> City</td> <td> <asp:TextBox ID="txtCity" runat="server"> </td> </tr> <tr> <td class="style3"> Designation</td> <td> <asp:TextBox ID="txtDesignation" runat="server"> </td> </tr> <tr> <td class="style3"> </td> <td> <asp:Button ID="btnAdd" runat="server" onclick="btnAdd_Click" Text="Submit" /> <input id="Reset1" type="reset" value="Reset" /></td> </tr> <tr> <td class="style3"> </td> <td> </td> </tr> </table> </div> </form> >/body> </html> CSS File : label.valid { font-weight: bold; color: red; padding: 2px 8px; margin-top: 2px; background: url("/Images/valid.png") no-repeat 0px 0px; } label.error { font-weight: bold; color: red; padding: 2px 8px; margin-top: 2px; background: url(/Images/invalid.png) no-repeat 0px 0px; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)