jQuery Validation plugin in ASP.NET Web Forms

Question

I would really like use the jQuery Validation plugin in my ASP.NET Web Forms application (not MVC). I find it easier than adding asp validators everywhere and setting the co

Answer 1

Tested what Darin Dimitrov said and it works perfectly, but if you don't want to set a specific class to each of your fields, you can use jQuery selectors:

$('form').validate();
$('input[id$=Username]').rules('add', { 
    required: true, 
    messages: { 
        required: 'Some custom message for the username required field' 
    } 
});

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" />

Answer 2

$("#signupForm").validate({
        rules: { 
                <%= tbUsername.UniqueID %>: {
                        required: true,
                        minlength: 2
                }, },
        messages: { 
                <%= tbUsername.UniqueID %>: {
                        required: "Please enter a username",
                        minlength: "username at least 2 characters"
                }, 
        });

<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox>

Answer 3

Here are examples of using the jQuery Validation plugin with WebForms and emulating the concept of validation groups with it. It actually works pretty well once you smooth out a couple issues.

Answer 4

For SharePoint 2010 I found with loading different usercontrols as views (via ajax) that this worked if you move javascript into a library and can't use server tags for the control id's like this:

e.g #<%= tPhone.ClientID %>

$('input[id$=tPhone]').rules('add', 
{      
 required: true,      
 messages: 
 {          
  required: 'Some custom message for the username required field'      
 }  
});

Further to this if you dynamically load a user control via Ajax then you cannot use $(document).ready You will have to encapsulate the jQuery in a function library if its on the User Control at (server side event) page load its fine but in the scenario its loaded via Ajax with the Update Panel it will not dance.

I have not tried loading usercontrols via jQuery yet, this looks heavy and appears to load the whole page albeit perhaps slightly quicker or not.

Tests comparing loading techniques showed the Update Panel was as fast and resulted in the same or smaller page sizes than other techniques and basically loaded quicker or much more data as quick or quicker.

Answer 5

The best solution is use "<%=tbUsername.UniqueID %>" instead of tbUsername in jQuery rules.

$("#signupForm").validate({
rules: { 
    "<%=tbUsername.UniqueID %>": {
        required: true,
        minlength: 2
    }, },
messages: { 
    "<%=tbUsername.UniqueID %>": {
        required: "Please enter a username",
        minlength: "username at least 2 characters"
    }, 
}.