送信フォームの入力内容が半角数字かチェック

送信フォームの入力内容が半角数字かどうかをチェックし、半角数字でなかった場合、「入力内容に不備があります。」というアラートを出現させ、送信せず、半角数字で入力させたい項目の項目名の右の「(半角数字で入力して下さい)」という注意書き部分の文字色が赤色、背景色が黄色になり、強調されるサンプル。

実装例

年齢(半角数字で入力して下さい)

実装例の動作について

半角数字以外を入力し、送信ボタンを押すと、

  • 「入力内容に不備があります。」というアラートが出現。
  • 「年齢」の右の「(半角数字で入力して下さい)」という注意書き部分の文字色が赤色、背景色が黄色になり、強調される。

(注意)サンプルのため、実際には送信しません。

ソースコード

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>

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>

解説

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>

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 で、コントロールしている。

スポンサード リンク

カテゴリー: JavaScript, フォーム, 逆引き パーマリンク