送信フォームの入力必須項目が入力されているかチェックし、入力必須項目に未入力があった場合、「必須項目は全て入力して下さい。」というアラートを出現させ、送信せず、未入力の必須項目の項目名の下に 【○○を入力して下さい】と表示させるサンプル。
実装例
実装例の動作について
- 実装例の送信フォームの、名前とコメントの欄に何も入力せず、送信ボタンを押すと、
- 「必須項目は全て入力して下さい。」というアラートが出現。
- 「名前（必須）」の下に、【名前を入力して下さい】を表示。
- 「コメント（必須）」の下に、【コメントを入力して下さい】を表示。
- 名前の欄に何か入力し、送信ボタンを押すと、
- 「必須項目は全て入力して下さい。」というアラートが出現。
- 「名前（必須）」の下の、【名前を入力して下さい】が消える。
- コメントの欄にも何か入力し、送信ボタンを押すと、
- アラートは出現せず、送信完了。
（注意）サンプルのため、実際には送信しません。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function formCheck(){
var flag = 0;
if( document . Form1 . InputText1 . value == "" ){
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}else{
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
}
if( document . Form1 . Textarea1 . value == "" ){
flag = 1;
document . getElementById( 'notice-textarea-1' ) . style . display = "block";
}else{
document . getElementById( 'notice-textarea-1' ) . style . display = "none";
}
if( flag ){
window . alert( '必須項目は全て入力して下さい。' );
return false;
}else{
return true;
}
}
// -->
</script>
<!--
function formCheck(){
var flag = 0;
if( document . Form1 . InputText1 . value == "" ){
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "block";
}else{
document . getElementById( 'notice-input-text-1' ) . style . display = "none";
}
if( document . Form1 . Textarea1 . value == "" ){
flag = 1;
document . getElementById( 'notice-textarea-1' ) . style . display = "block";
}else{
document . getElementById( 'notice-textarea-1' ) . style . display = "none";
}
if( flag ){
window . alert( '必須項目は全て入力して下さい。' );
return false;
}else{
return true;
}
}
// -->
</script>
HTML
<form name="Form1" method="post" action="#" onsubmit="return formCheck()">
<p>名前（必須）</p>
<p id="notice-input-text-1" style="display: none; color: red;"> 【名前を入力して下さい】</p>
<p><input type="text" name="InputText1"></p>
<p>コメント（必須）</p>
<p id="notice-textarea-1" style="display: none; color: red;"> 【コメントを入力して下さい】</p>
<p><textarea name="Textarea1" rows="5" cols="40"></textarea></p>
<p><input type="submit" value="送信"></p>
</form>
<p>名前（必須）</p>
<p id="notice-input-text-1" style="display: none; color: red;"> 【名前を入力して下さい】</p>
<p><input type="text" name="InputText1"></p>
<p>コメント（必須）</p>
<p id="notice-textarea-1" style="display: none; color: red;"> 【コメントを入力して下さい】</p>
<p><textarea name="Textarea1" rows="5" cols="40"></textarea></p>
<p><input type="submit" value="送信"></p>
</form>
解説
JavaScript
<script type="text/javascript">
<!--
function formCheck(){
var flag = 0;
// 入力必須項目が入力されているかチェック
if( document . Form1 . InputText1 . value == "" ){ // 名前が未入力の場合
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "block"; // 【名前を入力して下さい】を表示
}else{ // 名前が入力済みの場合
document . getElementById( 'notice-input-text-1' ) . style . display = "none"; // 【名前を入力して下さい】を非表示
}
if( document . Form1 . Textarea1 . value == "" ){ // コメントが未入力の場合
flag = 1;
document . getElementById( 'notice-textarea-1' ) . style . display = "block"; // 【コメントを入力して下さい】を表示
}else{ // コメントが入力済みの場合
document . getElementById( 'notice-textarea-1' ) . style . display = "none"; // 【コメントを入力して下さい】を非表示
}
if( flag ){ // 入力必須項目に未入力があった場合
window . alert( '必須項目は全て入力して下さい。' ); // アラートを表示
return false; // 送信中止
}else{ // 入力必須項目が全て入力済みだった場合
return true; // 送信実行
}
}
// -->
</script>
<!--
function formCheck(){
var flag = 0;
// 入力必須項目が入力されているかチェック
if( document . Form1 . InputText1 . value == "" ){ // 名前が未入力の場合
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . display = "block"; // 【名前を入力して下さい】を表示
}else{ // 名前が入力済みの場合
document . getElementById( 'notice-input-text-1' ) . style . display = "none"; // 【名前を入力して下さい】を非表示
}
if( document . Form1 . Textarea1 . value == "" ){ // コメントが未入力の場合
flag = 1;
document . getElementById( 'notice-textarea-1' ) . style . display = "block"; // 【コメントを入力して下さい】を表示
}else{ // コメントが入力済みの場合
document . getElementById( 'notice-textarea-1' ) . style . display = "none"; // 【コメントを入力して下さい】を非表示
}
if( flag ){ // 入力必須項目に未入力があった場合
window . alert( '必須項目は全て入力して下さい。' ); // アラートを表示
return false; // 送信中止
}else{ // 入力必須項目が全て入力済みだった場合
return true; // 送信実行
}
}
// -->
</script>
HTML
onsubmit=""
<form name="Form1" method="post" action="#" onsubmit="return formCheck()">
form要素のイベント属性である onsubmit="" で、フォーム内容送信時に、JavaScript の formCheck() を呼び出し、return で、戻り値を取得。戻り値が false の場合、送信を中止する。戻り値が true の場合、送信を実行する。
display: none;
<p id="notice-input-text-1" style="display: none; color: red;"> 【名前を入力して下さい】</p>
<p id="notice-textarea-1" style="display: none; color: red;"> 【コメントを入力して下さい】</p>
HTMLのフォーム要素内のスタイルシートの display プロパティの値に none を指定し、非表示にした上の二つを、入力必須項目に未入力があった場合、JavaScript で、display プロパティの値を block に変更し、表示させる。