送信フォームの入力内容が半角数字かどうかをチェックし、半角数字でなかった場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、半角数字で入力させたい項目の項目名の右の「（半角数字で入力して下さい）」という注意書き部分の文字色が赤色、背景色が黄色になり、強調されるサンプル。
実装例
実装例の動作について
半角数字以外を入力し、送信ボタンを押すと、
- 「入力内容に不備があります。」というアラートが出現。
- 「年齢」の右の「（半角数字で入力して下さい）」という注意書き部分の文字色が赤色、背景色が黄色になり、強調される。
（注意）サンプルのため、実際には送信しません。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function formCheck(){
var flag = 0;
if ( document . Form1 . InputText1 . value . match ( /[^0-9]+/ ) ){
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . color= "red";
document . getElementById( 'notice-input-text-1' ) . style . backgroundColor= "yellow";
}else{
document . getElementById( 'notice-input-text-1' ) . style . color= "";
document . getElementById( 'notice-input-text-1' ) . style . backgroundColor= "";
}
if( flag ){
window . alert( '入力内容に不備があります。' );
return false;
}else{
return true;
}
}
// -->
</script>
<!--
function formCheck(){
var flag = 0;
if ( document . Form1 . InputText1 . value . match ( /[^0-9]+/ ) ){
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . color= "red";
document . getElementById( 'notice-input-text-1' ) . style . backgroundColor= "yellow";
}else{
document . getElementById( 'notice-input-text-1' ) . style . color= "";
document . getElementById( 'notice-input-text-1' ) . style . backgroundColor= "";
}
if( flag ){
window . alert( '入力内容に不備があります。' );
return false;
}else{
return true;
}
}
// -->
</script>
HTML
<form name="Form1" method="post" action="#" onsubmit="return formCheck()">
<p>年齢<span id="notice-input-text-1">（半角数字で入力して下さい）</span></p>
<p><input type="text" name="InputText1" size="2"> 才</p>
<p><input type="submit" value="送信"></p>
</form>
<p>年齢<span id="notice-input-text-1">（半角数字で入力して下さい）</span></p>
<p><input type="text" name="InputText1" size="2"> 才</p>
<p><input type="submit" value="送信"></p>
</form>
解説
JavaScript
<script type="text/javascript">
<!--
function formCheck(){
var flag = 0;
// 半角数字で入力されているかチェック
if ( document . Form1 . InputText1 . value . match ( /[^0-9]+/ ) ){ // 半角数字で入力されていない場合
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . color= "red"; // （半角数字で入力して下さい）の文字色を赤色に
document . getElementById( 'notice-input-text-1' ) . style . backgroundColor= "yellow"; // （半角数字で入力して下さい）の背景色を黄色に
}else{ // 半角数字で入力されている場合
document . getElementById( 'notice-input-text-1' ) . style . color= ""; // （半角数字で入力して下さい）の文字色を指定しない
document . getElementById( 'notice-input-text-1' ) . style . backgroundColor= ""; // （半角数字で入力して下さい）の背景色を指定しない
}
if( flag ){ // 半角数字で入力されていない場合
window . alert( '入力内容に不備があります。' ); // アラートを表示
return false; // 送信中止
}else{ // 半角数字で入力されている場合
return true; // 送信実行
}
}
// -->
</script>
<!--
function formCheck(){
var flag = 0;
// 半角数字で入力されているかチェック
if ( document . Form1 . InputText1 . value . match ( /[^0-9]+/ ) ){ // 半角数字で入力されていない場合
flag = 1;
document . getElementById( 'notice-input-text-1' ) . style . color= "red"; // （半角数字で入力して下さい）の文字色を赤色に
document . getElementById( 'notice-input-text-1' ) . style . backgroundColor= "yellow"; // （半角数字で入力して下さい）の背景色を黄色に
}else{ // 半角数字で入力されている場合
document . getElementById( 'notice-input-text-1' ) . style . color= ""; // （半角数字で入力して下さい）の文字色を指定しない
document . getElementById( 'notice-input-text-1' ) . style . backgroundColor= ""; // （半角数字で入力して下さい）の背景色を指定しない
}
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 の場合、送信を実行する。
（半角数字で入力して下さい）
<span id="notice-input-text-1">（半角数字で入力して下さい）</span>
この部分の文字色と背景色を、JavaScript で、コントロールしている。