Over the past few weeks I’ve been working to migrate away from the Ajax Control Toolkit & various other ASP.NET built-in controls. My goal has been to get every page of our intranet portal down around 100K, with a maximum load time of < 1 second. I’ve made a lot of progress, but after being cleaning up all the basic stuff (excess view state, duplicate references, compressed JS/CSS, sprites, etc…), I had to start looking for additional items…
After using Fiddlerand FireBug to analyze the page contents, I found that the ASP.NET validation controls were generating ~10K in increase download size. Since my portal consists of injecting multiple user controls into a page, this number would vary by the number of modules using the validation controls. To stay consist with my client side library, I decided to implement jQuery Validation Plugin as a replacement to the ASP.NET validation controls.
The idea was simple enough, but since I’m living in the ASP.NET Web Form this were a bit more difficult to implement.
Issue #1 – jQuery Validation by FIELDSET
I’ve been using jQuery Validation for about a year, so I was already aware that it was built around using a single FORM versus multiple FIELDSETs. I put together a solution based on multiple articles I read about to come up with a “SaveAndSubmit” function. This function allows me to re-scope (ex. FIELDSET vs FORM) the group of controls you want to validate.
Here is my custom validation function that validates a group of controls within a FIELDSET with the class “validationGroup”.
function ValidateAndSubmit(evt) {
// Find the parent control that contains the class validationGroup
var $group = $(evt.currentTarget).parents('.validationGroup');
var isValid = true;
// Look at all the input controls and run them against the rules
$group.find(':input').each(function(i, item) {
if (!$(item).valid())
isValid = false;
});
// If any control is the group fails, prevent default actions (aka: Submit)
if (!isValid)
evt.preventDefault();
}
To use a custom validation function, you need disable the automatic binding of all buttons to the default validation function. This allows you to bind to your new custom event and to control which controls should trigger the validation.
// Disable default/auto binding of all buttons
$("#aspnetForm").validate({
onsubmit: false
});
// Bind the ASP.NET button with the ID "Search" to the "ValidateAndSubmit" custom validation function.
$('#<%= Search.ClientID %>').click(ValidateAndSubmit);
That’s it, with those three little little steps (Custom Validate Method, Disable Default/Auto Bind, Manual bind button to custom event), you now have a working validate by FIELDSET (or any other grouping control) solution.
Issue #2 – How to validate a group of ASP.NET Check Boxes
By default, ASP.NET will render a CheckBox or a CheckBoxList with an auto generated unique name attribute. This becomes a problem when you want to validate the group, since you can’t set a common name attribute for all the elements.
Here is an example of the HTML that would be rendered by a CheckBoxList with a layout of “Flow”.
<span id="CheckBoxGroup"> <input id="cbk1" name="cbk1" type="checkbox">Check Box 1</input> <input id="cbk2" name="cbk2" type="checkbox">Check Box 2</input> <input id="cbk3" name="cbk3" type="checkbox">Check Box 3</input> </span> <span class="jQueryValError"></span>
My solution to the problem required a custom validator and a custom errorPlacement function, for the jQuery validaiton plug-in.
First, I added a custom validator that looked at a group of check boxes that are inside a wrapping “Parent()” element. I then count the number of checked check boxes to make sure the limit required (e.g. Must check at least 3 check boxes) is greater than the minimum we set.
jQuery.validator.addMethod("minChecked",
function(value, element, param) {
var $p = $(element).parent();
var selected = $p.children('input[type=checkbox]:checked').length;
if (selected >= param) {
$p.children().removeClass('error');
$p.siblings('.error').remove();
return true;
}
$p.children('input[type=checkbox]').addClass('error');
In order to hookup this custom event to all the controls inside of a wrapping “Parent()” control, we use jQuery’s $().each function to call the validator’s rules() function.
$(".checkBoxGroup").children('input[type=checkbox]').each(function(){ $(this).rules("add", { minChecked: 3}); });
Second, our plug-in will by default put an error message next to the control(s) that triggered the error. I over ride the default behavior, we setup a “errorPlacement” function to put one error beside the wrapping “Parent()” control.
$("#<%= form1.ClientID %>").validate({
errorPlacement: function(error, element){
if(element.rules().minChecked > 0) {
var $p = $(element).parent();
if($p.siblings().hasClass("error") == false) {
error.insertAfter($p);
}
}
else {
error.insertAfter(element);
}
}
});
Here is what the form looks like when you have a error with your check boxes.
Here is source code used to create the example above.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Contact Form Demo</title>
<script src="styles/jQuery.js" type="text/javascript"></script>
<script src="styles/jQuery.Validate.js" type="text/javascript"></script>
<script src="styles/jQuery.Validate.AddOns.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.validator.addMethod("minChecked",
function(value, element, param) {
var $p = $(element).parent();
var selected = $p.children('input[type=checkbox]:checked').length;
if (selected >= param) {
$p.children().removeClass('error');
$p.siblings('.error').remove();
return true;
}
$p.children('input[type=checkbox]').addClass('error');
return false;}, jQuery.validator.format("Please check at least {0} items."));
$(document).ready(function(){
$("#<%= form1.ClientID %>").validate({
rules: {
<%= FirstName.UniqueID %>: { required: true },
<%= LastName.UniqueID %>: { required: true },
<%= Email.UniqueID %>: { required: true, email: true },
<%= Phone.UniqueID %>: { required: true, phoneUS: true }
},
errorPlacement: function(error, element){
if(element.rules().minChecked > 0) {
var $p = $(element).parent();
if($p.siblings().hasClass("error") == false) {
error.insertAfter($p);
}
}
else {
error.insertAfter(element);
}
}
});
$(".checkBoxGroup").children('input[type=checkbox]').each(function(){ $(this).rules("add", { minChecked: 3}); });
$(".myGroupRandom").children('input[type=checkbox]').each(function(){ $(this).rules("add", { minChecked: 1}); });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset>
<ol>
<li>
<label class="left">
First Name
</label>
<input type="text" id="FirstName" runat="server" /></li>
<li>
<label class="left">
Last Name
</label>
<input type="text" id="LastName" runat="server" /></li>
<li>
<label class="left">
Email
</label>
<input type="text" id="Email" runat="server" /></li>
<li>
<label class="left">
Phone
</label>
<input type="text" id="Phone" runat="server" /></li>
<li>
<label class="left">
Contact Method
</label>
<span class="checkBoxGroup">
<input type="checkbox" id="ReqEmail" runat="server" /><label>Email</label>
<input type="checkbox" id="ReqMail" runat="server" /><label>Mail</label>
<input type="checkbox" id="ReqPhone" runat="server" /><label>Phone</label>
<input type="checkbox" id="ReqNoContact" runat="server" /><label>No Contact</label>
</span></li>
<li>
<label class="left">
New Letter Type
</label>
<span class="myGroupRandom" >
<input type="checkbox" id="Checkbox1" runat="server" /><label>Company News</label>
<input type="checkbox" id="Checkbox2" runat="server" /><label>Press Releases</label>
<input type="checkbox" id="Checkbox3" runat="server" /><label>Deals</label>
<input type="checkbox" id="Checkbox4" runat="server" /><label>Employement</label>
</span></li>
<li>
<input type="submit" id="Submit" value="Submit" /></li>
</ol>
</fieldset>
</div>
</form>
</body>
</html>
