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

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>

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

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

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