クライアントサイドスクリプトによる、フォームのチェック

JavaScript と VBScript

IE 上で動くスクリプトは、通常は JavaScript となります。インターネット全体で言えば、ブラウザが IE であるとは限らず、OS ですら Microsoft Windows であるとは限りません。ですから、アプリケーションの「エンドユーザ」の環境を一般的に考えるのならば、JavaScript を使用するのが正しい設計と言えます。

しかし、アプリケーションはそもそもインターネット専用のものでは無く、「エンドユーザ」に対して提供するものですから、その環境が「Windows の IE を使用します」という前提で成り立つ場合もあります。そのような場合は、VBScript を使用したほうが Microsoft の環境下の利点を大いに活用する事ができますし、細かなコントロールは、VBScript のほうが容易で優れている場合が多く、他のシステム ( VB, ASP WSH 等 ) の資産を使用できたり、使用させたり共有する事ができます。

いずれにせよ、全ての知識を前提に Web アプリケーションに取り組むべきでしょう

JavaScript によるフォームのチェック

これは、フォームがサーバに送信される直前の「イベント」を利用します

name	サーバーサイドのアプリケーションで参照する為の名称
method	GET と POST があり、大量のデータは POST でしか送れない ( URL に使用可能な文字数は最大 2,083 文字 )
action	送り先( 省略すると自分自身 )
target	表示するウインドウ名( _blank で新しいウインドウ。フレームや IFRAME に対しても送れる )

<FORM
	name="frmMain"
	method="POST"
	action="control.php"
	target="BodyFrame"
	onSubmit='return CheckData()'
>
</FORM>

上記は、フォームタグの記述ですが、「onSubmit」がそのイベントです。

これによって、フォームを type="submit" のボタンか、
フォームオブジェクトの submit メソッドで送信しようとした時に、
送信前に CheckData() という関数を実行するようにする為の記述です

CheckData() の前の return は、CheckData() の戻り値をブラウザに渡す為の記述です。
もし、CheckData() の戻り値が false であると、フォームはサーバに送信されずにキャンセルされます。
反対に、戻り値が true であればフォームは送信されます。

これを利用して、CheckData() 関数内で、入力データのチェックを行ってエラーがあれば、
関数内で return false; を実行します

<SCRIPT language="javascript" type="text/javascript">

// *********************************************************
// フォームのチェック
// *********************************************************
function CheckData() {

	if ( Trim(document.getElementsByName("In1Email")[0].value) == "" ) {
		alert( "メールアドレスを入力して下さい" );
		document.getElementsByName("In1Email")[0].value = "";
		document.getElementsByName("In1Email")[0].focus();
		return false;
	}

	return true;
}

function Trim( strValue ) {

	// 以下[]内の空白に見えるのは漢字スペース
	var regL = /^[　\s]+/;
	var regR = /[　\s]+$/;

	strValue = strValue.replace(regL,"");
	strValue = strValue.replace(regR,"");

	return strValue;

}

</SCRIPT>

これは、非常にオーソドックスなチェックサンプルです。
( このような記述を行なう事によって、最低限の問題を「エンドユーザ」に警告する事ができます。 )

しかし、ブラウザはユーザによれば、スクリプトの使用を禁止している場合もあるので、
サーバーサイドのチェックを省略してはいけません。

これらは、あくまで「ユーザサイド」の操作性を高めたり、問題を発生しにくくする事が目的です

オブジェクトの参照方法

いろいろ方法がありますが、name 属性を持つ入力コントロールを参照する方法として、以下の二つを覚えて下さい

1) document.getElementsByName("In1Email")[0].value
2) document.getElementsByName("In1Email").item(0).value

入力チェックに使用する基本的なメソッド

サンプルにある focus メソッドはそのオブジェクトに入力カーソルを移動するものです。その他にも、テキスト入力を行なうフィールドでは、入力データを選択状態にする select メソッドがあります

入力チェックに使用するプロパティ

チェックボックスとラジオボタンでは、コントロールが選択されているがどうかを知る必要があります

// *********************************************************
// フォームのチェック
// *********************************************************
function CheckData() {

	if ( document.getElementsByName("In2Sex")[1].checked ) {
		alert( "女性が選択されています" );
	}

	return true;
}

コンボボックスとリストボックスでは、value 属性で指定された値を知る場合と、表示上の値を知る場合とで記述方法が違います。表示上の値を知る記述のほうが難しくなります

※ 選択されたインデックスは、document.getElementsByName("In2Yyyy")[0].selectedIndex
※ のような形で参照します ( 選択されていない場合は、-1 となります )

// *********************************************************
// フォームのチェック
// *********************************************************
function CheckData() {

	var nIdx = document.getElementsByName("In2Yyyy")[0].selectedIndex;

	alert( nIdx );

	var strValue = document.getElementsByName("In2Yyyy")[0].value;

	alert( "選択された value 値は " + strValue + "です" );

	var obj = document.getElementsByName("In2Yyyy")[0];
	var list = obj.getElementsByTagName("OPTION");
	strValue = list[nIdx].firstChild.nodeValue;

	alert( "選択された 表示値は " + strValue + "です" );

	// 非選択状態にする
	document.getElementsByName("In2Yyyy")[0].selectedIndex = -1;

	return false;
}

VBScript によるフォームチェック

VBScript の場合、onSubmit イベントを使用せずに直接フォーム名とイベント名を含む
関数名を使用して関数を記述します

<SCRIPT language="VBScript">

// *********************************************************
// フォームのチェック
// *********************************************************
function frmMain_onSubmit()

	if Trim(document.getElementsByName("In1Email")[0].value) = ""  then
		alert( "メールアドレスを入力して下さい" )
		document.getElementsByName("In1Email")[0].value = ""
		document.getElementsByName("In1Email").focus()
		frmMain_onSubmit = False
		exit function
	end if

	frmMain_onSubmit = True

end function

</SCRIPT>

IE のドキュメント内でスクリプトを記述する場合、デフォルトのスクリプトで無い場合は language 属性で指定する必要があります
但し、なにもなければ JavaScript がデフォルトになります。また、language 属性を持つSCRIPT タグを先頭に記述する
事によってドキュメント内のデフォルトにする事ができます

Trim は VBScript の関数です

更新確認ダイアログを表示する

例え、全てのチェックが OK でもいきなりフォームを送信せずに確認ダイアログを表示すべきです。これはオペレーションミスによる問題の発生を防ぐ為です

<SCRIPT language="javascript" type="text/javascript">

// *********************************************************
// フォームのチェック
// *********************************************************
function CheckData() {

	if ( !confirm( "更新してもよろしいですか?" ) ) {
		return false;
	}

	return true;

}

</SCRIPT>