JavaScriptのサンプル

テキストフィールドの入力状況をチェックするスクリプトです。

お名前:
(必須)

パスワード:
(必須)

コメント:
(必須)

(サンプルのためHTMLファイルにリンクしています)

コード

<html>
<head>
<title>TAG index Webサイト</title>

<script type="text/javascript"> 
<!-- 

function check(){

	var flag = 0;


	// 設定開始(必須にする項目を設定してください)

	if(document.form1.field1.value == ""){ // 「お名前」の入力をチェック

		flag = 1;

	}
	else if(document.form1.field2.value == ""){ // 「パスワード」の入力をチェック

		flag = 1;

	}
	else if(document.form1.field3.value == ""){ // 「コメント」の入力をチェック

		flag = 1;

	}

	// 設定終了


	if(flag){

		window.alert('必須項目に未入力がありました'); // 入力漏れがあれば警告ダイアログを表示
		return false; // 送信を中止

	}
	else{

		return true; // 送信を実行

	}

}

// -->
</script>

</head>
<body>

<form method="POST" action="example.cgi" name="form1" onSubmit="return check()">

<p>お名前:<br><input type="text" name="field1" size="30"> (必須)</p>
<p>パスワード:<br><input type="password" name="field2" size="30"> (必須)</p>
<p>コメント:<br><textarea name="field3" rows="5" cols="30"></textarea> (必須)</p>
<p><input type="submit" value="送信"></p>

</form>

</body>
</html>

解説

<head></head> 内にスクリプトを記述しておき、フォームの送信時にスクリプトを実行します。

上記の例は、フォームの送信ボタンを押したときに必須項目の入力状況を確認しています。入力漏れがあれば警告ダイアログを表示して送信を中止し、入力漏れがなければ送信を実行します。

  • このチェック方法は、inputtype="text" type="password"と、txtareaの入力欄で使用できます。

// 設定開始// 設定終了 の部分で、必須にする項目を設定してください。

document.フォーム名.フィールド名.value == ""
  • フォーム名 … formタグの name="" で指定した名前(上記の例では form1
  • フィールド名 … 各フィールドの name="" で指定した名前(上記の例では field1field2field3

送信するときにスクリプトを実行するので、formタグに onSubmit="return check()" を指定しています。


青い文字の部分は、必要に応じて書き換えてください。