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 control to validate field on all of them.

I am just having some issues both when setting the class like this class="required email" which I think has something to do with having a form tag within the main form tag.

I also run into issues when calling the jquery validate using the names which become mangled in an asp control

// validate signup form on keyup and submit
$("#signupForm").validate({
    rules: { 
        username: {
            required: true,
            minlength: 2
        }, },
    messages: { 
        username: {
            required: "Please enter a username",
            minlength: "username at least 2 characters"
        }, 
    }.

.......

        <p>
            <label for="username">
                Username</label>
            <input id="username" name="username" />
        </p>

because this

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

renders as

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

and mangles the name. I can get the ClientID using <%=tbUsername.ClientID %>but that doesn't work with ClientName

Has anyone had any success using the jquery validator plugin with asp.net? If so what about using multiple forms much like using separate validation groups?

Answer 1

A great way to do this is to use:

<%= textbox.Name %> or <%= textbox.ClientId %> whenever you need to reference a server item.

i.e.

var phoneNumb = $('#<%= tPhone.ClientID %>').val(); 

or

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

.......

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

The information in this article led me to use Control.ClientID when looking for a match with jQuery... Very useful information...

<label for="<%= tbName.ClientID %>">Name</label>
<input id="cphBody_tbName" runat="server" .../>

Answer 5

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 6

You can check xVal.webForms here: http://xvalwebforms.codeplex.com/