<inputname="ctl00$ContentPlaceHolder1$txtName"type="textid="ctl00_ContentPlaceHolder1_txtName" />
Now the jQuery Validation plug-in relies on elements having a ‘name’ attribute. So referencing a control using $('#<%= txtName.ClientID%>') doesn’t really work with jQuery Validation plug-in. Instead what is needed is to use the controls ‘name’ attribute with the jQuery Validation control. With the name mangling in ASP.NET Master Pages, here’s how to solve the problem
Step 1: Create an ASP.NET website with a Master Page and a Content Page.
Step 2: Download jQuery 1.3.2, jQuery VS 2008 Doc and jQuery Validation plug-in. Create a ‘Scripts’ folder in the Solution Explorer of your project and add these files to this folder.
Assuming you have downloaded these files, create a reference to these files in the <head> section of your Master page as shown below:
<head runat="server">
<title>jQuery Validation in ASP.NET Master Page</title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Step 3: Now go to your ContentPage and add two Textboxes and a Button inside the ContentPlaceHolder as shown below:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Name: <asp:TextBox ID="txtName" MaxLength="30" runat="server" /><br />
Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</asp:Content>
Step 4: Now inside this ContentPage, add the following script to enable jQuery Validation
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
$(document).ready(function() {
$("#aspnetForm").validate({
rules: {
<%=txtName.UniqueID %>: {
minlength: 2,
required: true
},
<%=txtEmail.UniqueID %>: {
required: true,
email:true
}
}, messages: {}
});
});
</script>
Name: <asp:TextBox ID="txtName" MaxLength="30" runat="server" /><br />
Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</asp:Content>
Since the jQuery Validation plug-in relies on elements having a ‘name’ attribute, observe how we are using the UniqueID of the controls to reference them like <%=txtName.UniqueID %> and apply validation rules to them.
Run the application and click on the Submit button. The Validation fires displaying the error messages as shown below
On entering invalid data, the following message appears
If you want to display custom messages, make use of the ‘messages’ parameter to specify a custom error message for a field as shown below:
<script type="text/javascript">
$(document).ready(function() {
$("#aspnetForm").validate({
rules: {
<%=txtName.UniqueID %>: {
minlength: 2,
required: true
},
<%=txtEmail.UniqueID %>: {
required: true,
email:true
}
}, messages: {
<%=txtName.UniqueID %>:{
required: "* Required Field *",
minlength: "* Please enter atleast 2 characters *"
}
}
});
});
</script>
So as seen in the screenshot below, using the ‘messages’ parameter, the error message ‘This field is required’ gets replaced with ‘* Required Field’ . You can also add some css to the error message as per your requirement.
That’s it for now. I hope you will now be able to use the jQuery Validation Plug-in with ASP.NET Master Pages.