3)フォームデータ送信時にテキストフィールドにテキストが未入力の場合は、アラートを表示させる。
  フォームからサブミットボタンをクリックしてデータを送信するときには、「submit」イベントが発生します。
  このイベントが発生したときにテキストフィールドに入力があるかないかをチェックして、未入力のテキスト
 フィールドがあれば、アラートを表示させてデータを送信しないように制御する方法は以下のようにします。

 <考え方>
  ①「submit」イベントは、「<form>」エレメントに対して発生します。したがって、「<form>」エレメントの
     オブジェクトを取得する必要があります。
  ②送信動作は、イベントリスナー関数を呼び出した親に「false」を戻すことで停止できます。
     しかし、IE以外のブラウザでイベントリスナーを使っている場合は、この方法で送信動作を中止
   することはできません。
     IE以外のブラウザでは、「イベントオブジェクト. preventDefault() 」メソッドを実行して、親の動き
   (ひとつ前のイベント)を停止すことができます。

 <ファイル名:ja11-3-1.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3)テキストフィールドにテキストが未入力の場合は、アラートを表示させる。</title>
<script type="text/javascript" src="js11-3-1.js"></script>
</head>
<body>
テキストフィールドにテキストが未入力の場合は、アラートを表示させる。 <br />
<form id="formId" name="formName" method="POST" action="abc.php">
氏名:<input type="text" name="tfName1" id="tfId1" /><br />
住所:<input type="text" name="tfName2" id="tfId2" /><br />
E-Mail:<input type="text" name="tfName3" id="tfId3" /><br />
<input type="submit" value="送信" id="btId1" />
</form>
</body>
</html>
 <ファイル名:js11-3-1.js>
setEventListener(window,"load",window_onLoad);
function setEventListener(obj,event,func){
    if(navigator.appName.indexOf("Microsoft")>-1){
        obj.attachEvent("on"+event,func);
    }
    else{
        obj.addEventListener(event,func,false);
    }
}

function window_onLoad(){
    var jsFormId=document.getElementById("formId"); //フォームエレメントのオブジェクトを取得しています。
    setEventListener(jsFormId,"submit",textCheck);  //取得したフォームオブジェクトの「submit」イベントリスナーを登録しています。
}

function textCheck(e){
    checkList=["tfId1","tfId2","tfId3"]; //テキストフィールドの「id」属性名を配列に格納しています。
    for(var i=0;i<checkList.length;i++){
        if(document.getElementById(checkList[i]).value==""){  //テキストフィールドが未入力かをチェックしています。
            alert("未入力の項目があります。");
            if(e.preventDefault){  //「preventDefault()」メソッドがあるかをチェックしています・
                e.preventDefault();  //IE以外のブラウザの場合、ひとつ前のイベントを取り消しをしています。
            }
        return false;  //IEの場合のは、「return false」でイベントが取り消されます。
        }
    }
    return true;  //この行は、なくてもかまいませんが、IEの場合、イベント続行の意味がありますので書いておきます。
}