スライドショー

JavaScriptで実現!入力フォームの値を取得してチェックする方法

JavaScriptを使って入力フォームをチェックするには、どうすればいいんだろう?
ちゃんとメールアドレスが入力されているか、確かめたいな。

こんにちは。HTMLやJavaScriptの開発歴8年の著者が、JavaScriptを使った入力フォームのエラーチェックの方法をご紹介します。

ショッピングサイトを眺めている時に、お問い合わせフォームなどを見たことはありませんか?
そこにはきっと名前やメールアドレスなどの入力欄があったと思います。

その時、メールアドレスを書き忘れちゃった!なんて経験、ありませんか?
私も何度か経験があります。

でも、そこは親切なWebサイト。メールアドレスの入力がないことをチェックして、きっちりと忠告してくれました。おかげでメールアドレスを書き忘れることなく、送信できたのでした。

このように、入力内容をチェックする機能はよく使われる機能です。JavaScriptを使って入力フォームの内容を受け取り、エラーがないかをチェックして、エラーがあれば画面に表示するような仕組みになっているんですね。

JavaScriptを使えば、フォームの入力値をいろいろと扱うことができるわけです。

それではさっそく、JavaScriptを使ったエラーチェックを行う方法を解説したいと思います。
今回はシンプルに、メールアドレスが入力されているかどうかをチェックする機能を実装します。

JavaScriptでフォームを扱うには

JavaScriptでフォームを扱うために、まずはHTMLで入力フォームを作成しておく必要があります。
今回はメールアドレスだけのシンプルなフォームを作りたいと思います!

メールアドレス入力欄と送信ボタンを作成

メールアドレス入力欄と送信ボタンのフォームを次のように作成します。

<html>
    <head>
---- 省略 ----
    </head>
    <body>
        <form action="xxx.html" method="get" name="mail_form">
            メールアドレス:<input type="text" name="mail">
            <input type="submit" value="送信">
        </form>
    </body>
</html>

すると、このような入力フォームが作られます。


入力フォームイメージ画像

メールアドレスはinputタグでtype="text"として作成します。そして必ず、name="mail"というように名前を書いておきます。あとでJavaScriptを使用して値を取得する際に必要になるからです。

送信ボタンは同じくinputタグで、type="submit"として作成します。ボタンの表示名はvalue="送信"という形で設定します。

これでフォームを作成することができました。準備完了です。

JavaScriptを使ってフォームの値をチェックしよう

それではいよいよ、JavaScriptを使用して入力された値をチェックしていきましょう!
JavaScriptをまだ一度も使ったことがないという方のために、基本的な部分の解説から始めたいと思います。

JavaScriptを使った処理のイメージ図

まず始めに、JavaScriptを使ってフォームの入力値をチェックする時、内部の動きはどのようになっているのか解説しておきたいと思います。
まずは下のイメージ図を見てください。


HTMLとJavaScriptの動作のイメージ図

HTMLで入力フォームを作成し、ユーザーが送信ボタンをクリックすると、JavaScriptの処理が始まるという感じです。
HTMLが画面表示など表の動きを担当し、JavaScriptが計算など裏の動きを担当するというイメージですね。

ということは、JavaScriptで記述する処理は上図の③〜⑥となります。

  • ユーザーが送信ボタンをクリックしたという情報を得る
  • メールアドレスの入力値を取得して何かしらの値が入力されているかチェックする
  • OKならエラーメッセージを表示する
  • NGなら送信ボタンの本来の処理を実行する
  •  
    それでは、この4つの動きをJavaScriptを使って作ります。

    送信ボタンのクリックイベントを作成

    まず一つ目の処理、送信ボタンをクリックしたという情報を受け取りましょう。
    このような記述を追加することで実現できます。

    <html>
        <head>
    ---- 省略 ----
        </head>
        <body>
            <form action="xxx.html" method="get" name="mail_form">
                メールアドレス:<input type="text" name="mail">
                <!-- ↓onClickイベントを追加 -->
                <input type="submit" value="送信" onClick="return check();">
            </form>
        </body>
    </html>

    送信ボタンの中に、onClick="return check()"というコードが追加されました。
    onClickというのは、イベントハンドラと呼ばれるもので、ユーザー操作を取得するためのものです。

    今回はクリック操作を取得したいので、onClickを使いました。用途によって様々なイベントハンドラが用意されています。
    そして、onClickの中にreturn check();と書いて、後述するエラーチェック処理を呼び出すようにしています。

    必須入力チェック

    それではonClickで呼び出しているcheck()の処理内容を書いていきましょう。
    次のようなコードを追加します。

    <html>
        <head>
    ---- 省略 ----
            <!-- ↓JavaScriptの処理を追加 -->
            <script type="text/javascript">
                function check(){
                    if (mail_form.mail.value == ""){
                        //条件に一致する場合(メールアドレスが空の場合)
                        alert("メールアドレスを入力してください");    //エラーメッセージを出力
                        return false;    //送信ボタン本来の動作をキャンセルします
                    }else{
                        //条件に一致しない場合(メールアドレスが入力されている場合)
                        return true;    //送信ボタン本来の動作を実行します
                    }
                }
            </script>
        </head>
        <body>
            <form action="xxx.html" method="get" name="mail_form">
                メールアドレス:<input type="text" name="mail">
                <!-- ↓onClickイベントを追加 -->
                <input type="submit" value="送信" onclick="return check()">
            </form>
        </body>
    </html>

    これで、エラー時にはこのようなメッセージが表示されるようになります。


    エラー時のメッセージ

    さて、どのように記述しているのか、詳しく見ていきましょう。

    まずは、<head>内に<script type="text/javascript"></script>を追加します。基本的にJavaScriptはこの中に記述することになります。
    そしてfunction check()という関数を作成します。これが送信ボタンのonClickで呼び出される関数です。

    次にメールアドレスの入力値はmail_form.mail.valueで取得することができます。これは、mail_formというフォームの中のmailという入力欄の値(=value)を取得するという意味を持っています。

    最後に、メールアドレスの入力値をチェックします。
    メールアドレスが入力されているかどうかを判断するコードは、if(mail_form.mail.value == ""){ }else{ } という形で書けます。

    これは、if( )の中の条件を満たせば最初の{ }内の処理が実行され、条件を満たさなければelse{ }内の処理が実行されるというものです。
    条件に一致する、つまりメールアドレスが空の場合は、alert()を使ってエラーメッセージを出力した後、return false;で送信ボタン本来の動作をキャンセルしています。

    条件に一致しない、つまりメールアドレスが入力されている場合は、return ture;で送信ボタン本来の動作を実行しています。

    これでJavaScriptを使ったエラーチェック処理を実装することができました!
    ぜひ、実際に動かして試してくださいね。

    JavaScriptイベントハンドラ一覧

    今回はonClickというイベントハンドラを使用してJavaScriptの処理を呼び出しましたが、その他にもフォームで使える様々なイベントハンドラがありますので、よく使われるものを中心に一覧で紹介しておきます。

    興味のある方はこれらも使ってみてください。きっとプログラミングの幅が広がるはずです。

    イベントハンドラ説明
    onClickクリックした時に発動
    onDblClickダブルクリックした時に発動
    onChangeフォームの入力値や選択値を変更した時に発動
    onBlurフォーカスが外れた時に発動
    onFocusフォーカスが当たった時に発動
    onSelect入力フォームの値をマウスドラッグなどで選択した時に発動
    onSelectStart入力フォームの値をマウスドラッグなどで選択しようとした時に発動
    onSubmitsubmitボタンをクリックした時に発動
    onResetresetボタンをクリックした時に発動

    まとめ

    今回はJavaScriptを使ったフォームの入力チェックを解説しました。フォームに設定したonClickイベントからJavaScriptの関数を呼び出し、条件文を使って実現できましたね。

    JavaScriptを使うと、HTMLだけではできないことが沢山できるようになります。
    ぜひ、今回の内容を参考にして、いろんなエラーチェックを実装してみてください!

    LINEで送る
    Pocket

    無料でSEからWebエンジニアへ転職しませんか?



    侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

    • システムエンジニアという職業だけどコードが書けない
    • 事務作業が多くスキルがないため将来が不安
    • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
    という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

    弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

    既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

    まずは無料体験レッスンを予約する

    書いた人

    Tatsuya

    Tatsuya

    プログラム歴10年のシステムエンジニアです。
    経験のある言語はHTML,JavaScript,PHP,VB,VBAなど。
    WEB系の開発が得意です。

    おすすめコンテンツ

    あなたにぴったりなプログラミング学習プランを無料で診断!

    プログラミング学習の効率を劇的に上げる学習メソッドを解説