Asp.Net Tutorial - Validation of user login form using jQuery

Let's start with validation of a basic user login form using the validation plugin. The idea is to familiarize ourselves with the basics of using this plugin with ASP.NET controls.

Add a new web form LoginDemo.aspx to the current project.

Include the jQuery library and the validation plugin on the form.

Create a simple login form using ASP.NET controls as shown:

<table border="0" cellpadding="3" cellspacing="3">
<tr><td colspan="2" class="header">LOGIN USER</td></tr>
<tr>
<td align="right">
<asp:Label ID="lblUserName" runat="server" Text="UserName: "></asp:Label>
</td>
<td align="left">
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="lblPassword" runat="server" Text="Password: "></asp:Label>
</td>
<td align="left">
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="btnSubmit" runat="server" Text="Submit"/>&nbsp;
<asp:Button ID="btnReset" runat="server" Text="Reset"/>
</td>
</tr>
</table>

Add a div area below the login controls where we will display the error messages:

<div align="center" class="alertmsg">
</div>

We will perform the following validations on the login form:

• The UserName and Password fields are mandatory.
• The minimum length of the Password field is eight.
• We will also define custom error messages and display the error labels in the error div area.

Thus, the complete jQuery solution is as follows:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
var validator = $("#form1").validate({
rules: {
txtUserName: "required",
txtPassword: { required: true, minlength: 8 }
}
,
messages: {
txtUserName: "Please enter your UserName",
txtPassword: { required: "Please enter your Password",
minlength: "Password should be at least 8 characters long"
}
},
wrapper: 'li',
errorLabelContainer: $("#form1 div.alertmsg")
});
$("#btnReset").click(function(e) {
e.preventDefault();
$("#txtUserName").val("");
$("#txtPassword").val("");
});
});
</script>