<html xmlns="
http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.alertmsg
{
color: #FF0000;
}
</style>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var validator = $('#form1').validate({
//Add the rules option to the validate function
rules: { txtUserName: "required", //Define the UserName as a mandatory field
txtPassword: { required: true, minlength: 8}//Define the Password as a mandatory field and define its minimum length as eight
},
//Add the messages option to the validate function
messages: { txtUserName: "please enter your user name", //Define a custom error message for UserName validation
//Define custom error messages for Password validation:
txtPassword: { required: "please enter your password", minlength: "Password should be at least 8 char long" }
},
wrapper: 'li', //Wrap the error labels in a ListItem element
errorLabelContainer: $("#form1 div.alertmsg")//Define the errorLabelContainer where the error labels will be displayed when the validation fails
});
$('#btnReset').click(function (e) {
e.preventDefault();
$('#<%=txtUserName.ClientID %>').val("");
$('#<%=txtPassword.ClientID %>').val("");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:Label ID="lblUserName" runat="server" Text="UserName:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPassword" runat="server" Text="Password:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
<asp:Button ID="btnReset" runat="server" Text="Reset" />
</td>
</tr>
</table>
</div>
<div class="alertmsg">
</div>
</form>
</body>
</html>
<head runat="server">
<title></title>
<style type="text/css">
.alertmsg
{
color: #FF0000;
}
</style>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var validator = $('#form1').validate({
//Add the rules option to the validate function
rules: { txtUserName: "required", //Define the UserName as a mandatory field
txtPassword: { required: true, minlength: 8}//Define the Password as a mandatory field and define its minimum length as eight
},
//Add the messages option to the validate function
messages: { txtUserName: "please enter your user name", //Define a custom error message for UserName validation
//Define custom error messages for Password validation:
txtPassword: { required: "please enter your password", minlength: "Password should be at least 8 char long" }
},
wrapper: 'li', //Wrap the error labels in a ListItem element
errorLabelContainer: $("#form1 div.alertmsg")//Define the errorLabelContainer where the error labels will be displayed when the validation fails
});
$('#btnReset').click(function (e) {
e.preventDefault();
$('#<%=txtUserName.ClientID %>').val("");
$('#<%=txtPassword.ClientID %>').val("");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:Label ID="lblUserName" runat="server" Text="UserName:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPassword" runat="server" Text="Password:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
<asp:Button ID="btnReset" runat="server" Text="Reset" />
</td>
</tr>
</table>
</div>
<div class="alertmsg">
</div>
</form>
</body>
</html>