The first time I used the JQuery Validate plugin, it did not work at all, see JQuery Validate odd behaviour with the ASP.NET Script Manager for reason, but perseverance and stubbornness prevailed and I finally created my first JQuery validated ASP.NET Forms contact form. There are a lot of examples out there, though for some odd reason I can never find a decent example of anything to do with ASP.NET Forms and JQuery, so I battled it out.
First and foremost, when using JQuery with forms the this.object.ClientID function is your second best friend, your best friend is the fact that you can have more than one CSS class descriptor in one class, for example the following CssClass="required email" is completely valid, thanks to JQuery’s CSS Selector. This means the you do not have to know the object’s name and that the same behaviour can easely be set to more than one object with ease.
But I digress, though I must be honest I am still learning a lot about JQuery’s ability to make my life easier every day.
The initiation code is simple enough:
<asp:ScriptManager ID="ScriptManagerProxy1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Assets/Javascript/jquery.validate.pack.js" />
</Scripts>
</asp:ScriptManager>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('.error').hide();
$('#<%= this.Page.Form.ClientID %>').validate();
});
</script>
A few things worth noticing, I use the ScriptManager for relative path (the ~/ thing), this eases the problems related to maintenance and moving the ASP.NET file will cause no adverse effect, so if like me you want to refactor the path, it’s not an issue. I also hide all error text $('.error').hide() it is recommended to hide any object wit the .error Css selector prior to use. And then register the validation methods where I use this.object.ClientID to ensure that the right object is called, since I make use of MasterPages this is essential.
From here things get even easier, apply the required validation on the object
<asp:TextBox ID="txtEmail" runat="server" CssClass="required email"></asp:TextBox>
Though not required, I would advise that, as a standard, the first CSS selector have an actual class in the CSS file. I also set a default class to all of my inputs.
For further built-in and custom validation requirement please head over to JQuery Validate plugin page where you will find the documentation.