フォームで必須項目をつくる

[どうやって?]

if文とflagを用いる

[ソースコード]

<head>
<script type="text/JavaScript">
<!--

function formCheck(){
	var flag = 0; // trueのときのフラッグを設定

	if(document.test_form.name.value == ""){ // 名前が未入力のとき(name属性で要素を取得する)
		flag = 1; // falseのとき用のフラッグをたてる
		document.getElementById('nyuryoku_hissu').style.display = "block";} // 表示させる
		else{
		document.getElementById('nyuryoku_hissu').style.display = "none";} // 表示させない

	if(flag == 1){ // 名前が未入力のとき
		alert("必須項目を入力して下さい");
		return false;} // 送信を止める
	else{
		return true;} // 送信する
}		
//-->
</script>
</head>
<body>

<form name="test_form" method="post" action="" onsubmit="return formCheck()"> // submitボタンが押下したら
<p>名前(必須)</p>
<p id="nyuryoku_hissu" style="display: none; color: red;">【名前を入力して下さい】</p>
<p><input type="text" name="name" value="" /></p>
<p><input type="submit" value="送信する" /></p>
</form>

</body>

※JavaScriptでformの中身(未入力チェック・文字数カウント・送信)を操作するときはdocument.フォームのname名.パーツのname名.value = " "とnameを取得する。
他、document.フォームのname.パーツのelements[].value = " "で取得することもできる。[]内は数字を記述し、
上から順番である。フォーム内に設置するエレメントはinput、select、textareaなどである。

仕組み

逆に言えば、form以外の要素を取得したい場合はgetElementById('')やgetElementsByTagName('')でidやHTML要素のタグを取得する。
取得について詳しくはDOMのページを参照。

formの要素でもgetElementsByName('')は使える

※onsubmitは、フォームの送信ボタン(type属性がsubmitのボタン)がクリックされた時に発生するイベント。

[実行結果]

名前(必須)

インデックスページに戻る