Bloated JavaScript in ASP.NET Validation Controls
Over the past year I’ve been developing with a text browser. I manually typed XHTML, CSS and JavaScript code, observing best practices promoted by the web standards community. I wrote the server side code in a text editor too.
Teaching myself ASP.NET is making me wince. I thought outputting invalid non-semantic HTML was a bad enough crime. I am shocked and appalled to discover the bloated JavaScript code ASP.NET generates to check that a text box is not empty. The code below generates 23.8KB of JavaScript, all because of the RequiredFieldValidation control. The HTML document too has splashes of JavaScript code throughout the page.
<form id="form1" runat="server">
<div>
<p>
Username:<br />
<asp:TextBox ID="usernameTextBox" runat="server" />
<asp:RequiredFieldValidator ID="usernameReq" runat="server" ControlToValidate="usernameTextBox" ErrorMessage="Username is required!" SetFocusOnError="True" />
</p>
<p>
<asp:Button ID="submitButton" runat="server" Text="Submit" />
</p>
</div>
</form>
Remove the RequiredFieldValidation control and all traces of JavaScript disappear.
Why so much JavaScript code?
The JavaScript code generated is for every validator control in ASP.NET. Still, 23.8KB is a hefty download, even if it covers all validation controls. Why haven’t the Microsoft .NET development team at least compressed the JavaScript?
I’ve verified that the generated JavaScript files have the same across different web pages, which means the browser does not have to download the files on each new page load.
The alternative
In order to avoid bulky JavaScript code, there are two options.
Use HTML controls and write your own validation code. The downside is that you will also have to write server-side validation code in case JavaScript has been switched off in the browser.
Spin your own CustomValidator. You can use the ServerValidate event to handle serve-side validation and set the ClientValidationFunction property to the name of the client-side JavaScript validation function.
That’s the price you pay for using a framework. It’s not as if 24K is a burden for most people these days. A one off download to the client means you, as the developer, spend less time reinventing the wheel and more time getting on with stuff that matters, eg. application logic.
It’s true that 24K of code seems a lot for a very simple form, but complex forms will need the same code too, and it will cached. Because of latency on the web, it’s probably faster to download one larger file than multiple small ones anyway.
The alternative to using pre-built validation controls is, as you suggest, to wite your own. To make them as robust or as fully featured as a professional while leaving a smaller footprint is a project in of itself. Your clients must REALLY need this 24K of bandwidth to make it worth it.
Be lazy. Let your website be 10% slower for the sake of gaining all that you do with a well designed client side framework.
BTW, I’ve never used the Microsoft validators. Because of how badly they sucked in ASP.NET 1, I’ve always used Peter Blum’s.
Mike
September 18, 2007