必要な項目のみ入力されていたら送信する(空欄チェック)

説明

テキストフィールドの空欄チェックはvalueプロパティを読み出し文字が入力されているかどうかを調べます。テキストフィールドが1つの場合は簡単ですが、複数ある場合にはあらかじめ調べるテキストフィールドのID名を配列に入れておきます。配列の数だけ繰り返して空欄チェックを行えば簡単なプログラムですみます。
JavaScriptテクニック ブック  詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>必要な項目が入力されていたら送信する</h1>
<form action="./regist.cgi" method="get" id="mainForm" name="mainForm">
名前:<input type="text" name="userName" id="userName">*<br>
年齢:<input type="text" name="userAge" id="userAge">*<br>
住所:<input type="text" name="userAddress" id="userAddress">*<br>
メール:<input type="text" name="userEmail" id="userEmail"><br>
ブログ:<input type="text" name="userBlog" id="userBlog"><br>
*は必須項目<br>
<input type="submit" id="loginButton" value="送信">
</form>
</body>
</html>

window.onload = function(){
document.getElementById("mainForm").onsubmit = function(){
var checkList = ["userName", "userAge", "userAddress"];
for (var i=0; i<checkList.length; i++){
if(!document.getElementById(checkList[i]).value){
alert("未入力の項目があります");
return false;
}
}
return true;
}
}