| OS | Windows Vista |
| VisualStudio | 2005 + Vistaパッチ |
| .NET | 2.0 |
| ブラウザ | IE7 |
| 言語 | JavaScript |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>無題のページ</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="sample" Text="" />
<asp:Button runat="server" ID="proc" Text="処理" />
</div>
</form>
</body>
</html>
これの実行結果は，次のようになります．
<!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>
無題のページ
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTkwNjc4NTIwMWRkg5+ZqZBT5NE9RSOzHkJ74iIs2Ng=" />
</div>
<div>
<input name="sample" type="text" id="sample" />
<input type="submit" name="proc" value="処理" id="proc" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKk0aJiAtit3+ECAr+LlP8FrKEque5agT/Q2ul3EP/4V38MLSc=" />
</div></form>
</body>
</html>
特にJavaScriptなどを必要とするような処理は無いので，VIEWSTATEなどの値が埋め込まれている以外は.aspxファイルと大差ない状態です．<asp:RequiredFieldValidator ControlToValidate="sample" runat="server" ID="validatorSample" ErrorMessage="必須です" Display="dynamic" />すると，実行結果が次のように変わります．
<!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>
無題のページ
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwODY4OTY1NTNkZKshFeGKAvCYkhIv6mSQVzOcfOYt" />
</div>
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<script src="/SampleDotNet/WebResource.axd?d=L6u_cog5rGt8k4C4jGFXZw2&t=633197954615849000" type="text/javascript"></script>
<script src="/SampleDotNet/WebResource.axd?d=QPItuxfSgpBNWFhnb65V-hKYAPPunmZkKIqFSvfsED81&t=633197954615849000" type="text/javascript"></script>
<script type="text/javascript">
<!--
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
// -->
</script>
<div>
<input name="sample" type="text" id="sample" />
<span id="validatorSample" style="color:Red;display:none;">必須です</span>
<input type="submit" name="proc" value="処理" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("proc", "", true, "", "", false, false))" id="proc" />
</div>
<script type="text/javascript">
<!--
var Page_Validators = new Array(document.getElementById("validatorSample"));
// -->
</script>
<script type="text/javascript">
<!--
var validatorSample = document.all ? document.all["validatorSample"] : document.getElementById("validatorSample");
validatorSample.controltovalidate = "sample";
validatorSample.errormessage = "必須です";
validatorSample.display = "Dynamic";
validatorSample.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
validatorSample.initialvalue = "";
// -->
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKxwaX3CALYrd/hAgK/i5T/BcT3PPGh/LvzqMoLvuHKENrF981H" />
</div>
<script type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
// -->
</script>
</form>
</body>
</html>
かなり多くの要素が追加されていることがわかると思います．<iinput type="submit" name="proc" value="処理" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions( (略)ボタンのonclickイベントで関数を呼び出しているわけですね．
<script src="/SampleDotNet/WebResource.axd?d=L6u_cog5rGt8k4C4jGFXZw2&t=633197954615849000" type="text/javascript"></script> <script src="/SampleDotNet/WebResource.axd?d=QPItuxfSgpBNWFhnb65V-hKYAPPunmZkKIqFSvfsED81&t=633197954615849000" type="text/javascript"></script>jsファイルと書きましたが，実際にどこかにjsファイルが存在するわけではなく，WebResource.axdに引数を渡して生成したデータをブラウザに読み込ませる仕組みになっています．
*1 : センスが悪くてごめんなさい．多分正式名称は別にあると思いますが
<script type="text/javascript">
<!--
var Page_Validators = new Array(document.getElementById("validatorSample"));
// -->
</script>
ここで取得しているIDがvalidatorSampleの要素の実体は，次のようにspan要素になっています．<span id="validatorSample" style="color:Red;display:none;">必須です</span>複数のValidatorがページ内に存在しているような場合は，次のような形で複数のValidatorが登録されます．
var Page_Validators = new Array(document.getElementById("validatorSample"), document.getElementById("rangeValidatorSample"));
<script type="text/javascript">
<!--
var validatorSample = document.all ? document.all["validatorSample"] : document.getElementById("validatorSample");
validatorSample.controltovalidate = "sample";
validatorSample.errormessage = "必須です";
validatorSample.display = "Dynamic";
validatorSample.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
validatorSample.initialvalue = "";
// -->
</script>
手順1で配列に登録しているものと同じspan要素のオブジェクトに.aspxで指定した属性を設定しています．<asp:RequiredFieldValidator ControlToValidate="sample" runat="server" ID="validatorSample" ErrorMessage="必須です" Display="dynamic" />
<script type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
ValidationOnLoad関数は，Validatorコードの中に入っています．<input type="submit" name="proc" value="処理" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("proc", "", true, "", "", false, false))" id="proc" />WebForm_DoPostBackWithOptionsとWebForm_PostBackOptionsは，Systemコードに含まれています．
onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("proc", "", true, "", "", false, false)
if (options.validation) {
if (typeof(Page_ClientValidate) == 'function') {
// ページ内のvalidationGroupに所属するValidatorを一括起動
validationResult = Page_ClientValidate(options.validationGroup);
}
}
これで，validationGroupに所属するvalidatorを一括で起動する方法がわかります．function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit)詳しい意味については，MSDN2のここを参照して下さい．
for (i = 0; i < Page_Validators.length; i++) {
// Validatorを起動
ValidatorValidate(Page_Validators[i], validationGroup, null);
}
// 全Validatorの検証結果を確認
ValidatorUpdateIsValid();
ValidationSummaryOnSubmit(validationGroup);
Validatorの初期化処理によってPage_Validators配列には，Validatorの一覧が入っているわけですから，*2 : 各Validatorに表示されるErrorMessageをまとめて一覧表示できるコントロール
function ValidatorValidate(val, validationGroup, event) {
～～
検証処理
～～
ValidatorUpdateDisplay(val);
}
検証処理では，Validatorコントロールで設定したクライアントサイドの検証用関数を呼び出してtrue/falseで結果を取得し，
var validationResult = false;
validationResult = Page_ClientValidate("検証対象のvalidationGroup");
// 検証対象のValidatorを取得する．ここではgetElementByIdで取得しているが，方法は何でもOK．
var validationTarget = document.getElementById('validatorID');
var validationGroup = 'mainValidationGroup';
ValidatorValidate(validationTarget, validationGroup, null);
// 結果の取得は，検証したValidatorのisvalidプロパティに入っている
var validationResult = validationTarget.isvalid;
var validationTarget = document.getElementById('validatorID');
validationTarget.isvalid = false;
ValidatorUpdateDisplay(val);