JQuery Validation Plugin in ASP.NET Web Forms

Question

I would really like to use the jQuery Validation plugin in an ASP.NET Web Forms application (not MVC). It’s easier for me than adding asp validators everywhere, and setting up a control to check the fields on all of them.

I am having some problems installing a class, such as class = "required email address", which, it seems to me, is related to the form tag in the main form tag.

I also run into problems when calling jquery validation using names that get crippled in 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 one

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

displayed as

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

and changes the name. I can get ClientID using <%=tbUsername.ClientID %> , but this does not work with ClientName

Has anyone had success using the jquery validation plugin with asp.net? If so, what about using multiple forms similar to individual validation groups?

Answer 1

You can check the rules to add a function , but basically here what you can do:

 jQuery(function() { // You can specify some validation options here but not rules and messages jQuery('form').validate(); // Add a custom class to your name mangled input and add rules like this jQuery('.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" class="username" /> 

This way you don’t have to worry about the crappy identifiers generated by the webforms engine.

Answer 2

The following are examples using the jQuery Validation plugin with WebForms and emulating the concept of validation groups . It really works very well as soon as you smooth out a couple of problems.

Answer 3

 $("#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 4

Here you can check xVal.webForms: http://xvalwebforms.codeplex.com/

Answer 5

It was tested what Darin Dimitrov said, and it works fine, but if you don't want to set a specific class for each of your fields, you can use the jQuery selector:

 $('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

The best solution is to 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" }, }. 

Answer 7

I recently posted a patch file for xVal.WebForms that allows multiple forms to be relayed in the well-known ASP.Net validation group. This patch also supports the ASP.Net CausesValidation property.

Yo can read about it here: http://cmendible.blogspot.com/

Answer 8

Great way to do this:

<% = textbox.Name%> or <% = textbox.ClientId%> when 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 9

For SharePoint 2010, I found that when loading various user elements in the form of views (via ajax), this worked if you move javascript to the library and cannot use server tags for the control identifier as follows:

eg #<%= tPhone.ClientID %>

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

In addition to this, if you dynamically load the user control via Ajax, you cannot use $ (document) .ready you will need to encapsulate jQuery in the function library if it loads on the User Control at (side side event) page, but in script downloaded through Ajax using the update panel, it will not dance.

I have not tried loading usercontrols through jQuery yet, it looks heavy and seems to load the whole page, although it may be a little faster or not.

Tests comparing download methods showed that the update panel was as fast and led to the same or smaller page sizes as other methods, and basically loaded faster or much more data faster or faster.

Answer 10

I recommend using jQuery.simple.validator, its simple, easy and custom validator compatible with asp.net web formats, because basically it can perform checks in any container, not just

https://github.com/v2msoft/jquery.simple.validator

I recommend you check out the plugin and documentation. Using:

 <script type="text/javascript" src="/Content/js/jquery-plugins/jquery.simple.validator.js"></script> <div id="container"> <!-- REQUIRED FIELD --> <label>Required Field: </label><br/> <input type="text" id="required_field_control" data-required data-required-msg="Field is required" /><br /><br/> <input type="button" value="Validate" onclick='javascript:validate();' /> </div> <script type="text/javascript"> function validate() { $("#container").initialize(); var ok = $("#container").validate(); if (!ok) alert("There are errors"); else alert("Form is ok"); } </script 

Answer 11

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" .../>