Sometimes, it will be better if the validation occurs
only when we submit the form and not on blur. But, the downside of this approach
is it will not give better user experience during bulk input processing.
We have got a client whose requirement is to have the
validations fired only on submit because they had all other applications with
similar behaviors. When I was browsing on this topic, i have come across an
interesting discussion here
regarding the same.
Moving forward, this article will help us to do it with
the existing validation control that is packed with ASP.Net.
Before moving to the actual implementation, it will be
better if we know some of rudimentary things on how this validator controls
works on the client side.
Basics of Validator Controls in ASP.Net
When we use validator controls in our asp.net page, a
set of JavaScript validation functions will get downloaded to the client. This
function will be fired in the client side for the validations. There are some
differences how these validation functions are downloaded to the client machine
in ASP.Net 1.x and ASP.Net 2.0.
In ASP.Net 1.x, the validation functions are packed with
a file called "WebUIValidation.js" which will be downloaded along with the
rendered HTML. This will be residing on the client file system and a reference
to the file will be added through the <Script> tag. Refer the below HTML
output where the script file is referenced in an ASP.Net 1.x page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft
Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE"
Content="C#">
<meta name="vs_defaultClientScript"
content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form name="Form1" method="post"
action="WebForm1.aspx" language="javascript" onsubmit="ValidatorOnSubmit();"
id="Form1">
<input type="hidden" name="__VIEWSTATE"
value="dDwtMTkwMDYxMzg7Oz7AUuAelhiPsNXAfZ1DoX24Tmq4dQ==" />
<script language="javascript"
src="/aspnet_client/system_web/1_1_4322/WebUIValidation.js"
temp_src="/aspnet_client/system_web/1_1_4322/WebUIValidation.js"></script>
In ASP.net 2.0, it is slightly different where it will
not be downloaded to the client file system but it will be exposed via web
resource handler called WebResource.axd. It is possible to expose the resources
to client with this handler by preventing them to be stored in client file
system.
Refer the below html extract rendered by an ASP.Net 2.0
engine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="Test.aspx"
onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwULLTE5MDkxNzgwODFkZGtTcLWX8RQJqLvYxMVvfhaIJ1Wd" />
</div>
<script
src="/Test/WebResource.axd?d=MmkIuS8GKRYD1_VCtNXJ-86-CSVYecF-wlKTt7bZ-vA1&t=633571709935000797"
temp_src="/Test/WebResource.axd?d=MmkIuS8GKRYD1_VCtNXJ-86-CSVYecF-wlKTt7bZ-vA1&t=633571709935000797"
type="text/javascript"></script>
Additionally, the rendered html code will contain an
array [Page_Validators] with all validator control as an element of the
array.
When a single validator control is associated with a
textbox, the rendered output will be,
<script type="text/javascript">
//<![CDATA[
var Page_Validators = new
Array(document.getElementById("RequiredFieldValidator1"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator1 = document.all ?
document.all["RequiredFieldValidator1"] :
document.getElementById("RequiredFieldValidator1");
RequiredFieldValidator1.controltovalidate =
"txtUserName";
RequiredFieldValidator1.errormessage = "*";
RequiredFieldValidator1.evaluationfunction =
"RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator1.initialvalue = "";
//]]>
</script>
|