Unobtrusive Validation with ASP.NET 4.5 Web Forms

ASP.NET 4.5 has a nice set of new features. One of them is unobtrusive validation.

If you view the source of a rendered ASP.NET web forms application page having some validation controls in it, you might have seen a bunch of JavaScript loaded on the page. Following is the script generated by a RequiredFieldValidator on a TextBox with id txtName:

var ctl02 = document.all ? document.all["ctl02"] : document.getElementById("ctl02");
ctl02.controltovalidate = "txtName";
ctl02.errormessage = "Name is required";
ctl02.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ctl02.initialvalue = "";

You will find the similar type of code repeated for each validator placed on the page. If you are familiar with unobtrusive validation with ASP.NET MVC, you must be quite unhappy with the amount of code generated by the validation controls. The new unobtrusive validation feature of ASP.NET 4.5 addresses this.

Unobtrusive validation at the application level:

In Web.config of an ASP.NET 4.5 web forms application, you will find the following entry under app settings:

<add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms" />

It enables unobtrusive validation across the application. If you view the source of a page rendered on browser, you won’t find script for validation on the page. Instead, three script tags similar to the following tags could be found on the page:

<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZLv7DjRaFqg0yRBfnvODdAS94A_OOBwhy8nY7JMj1NbACkb_ZyVf5fipIP42cocX1Q2&t=634714073180000000" type="text/javascript"/>
<script src="/Scripts/jquery-1.6.2.js" type="text/javascript"/>
<script src="/WebResource.axd?d=x2nkrMJGXkMELz33nwnakL2OZ4HP8bsjSngrcd8UroKEEVhaEuVC5g5pe51DNkLFL7DehRRQHMYPIuJvCi0WQsVaECZ-CsAU-OcJY4vtyF41&t=634714073180000000" type="text/javascript"/>

Scripts referred by first and third tags are generated dynamically when the application runs. These scripts would be generated only when unobtrusive validation is enabled. These scripts are shared across all the pages that contain validation controls.

The second WebResource.axd script referred contains JavaScript functions for all the validators and the code to invoke those functions. Source on the page rendered contains some span tags that are generated because of the validation controls. It is totally free of script corresponding to the validation controls.

If you don’t want to use unobtrusive validation on all pages, you may disable it from web.config by changing the value of application setting to None as shown below:

<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />

At the page level:

At page level, unobtrusive validation can be enabled by setting value to the page variable UnobtrusiveValidationMode to WebForms as shown below:

protected void Page_Load(object sender, EventArgs e)
{
     UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.WebForms;
}

Similarly, if unobtrusive validation is enabled at the application level, we can use the following script to disable it on a page:

protected void Page_Load(object sender, EventArgs e)
{
     UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.None;
}

When to use?

In my opinion, unobtrusive validation should be used when the web application consists of many forms and if the forms are associated with some ASP.NET validation controls. If we have just one or two forms in the application with very less amount of validation done in those pages, then it is better to disable the unobtrusive validation. This is because, there is no point of making the validation script reusable in such small applications.

Happy coding!