JavaScript入門 #16 - フォーム入力とバリデーション

入門 | 10分 で読める | 2026.06.14

公式ドキュメント
実演JavaScriptフォーム

このシリーズについて

「JavaScript入門」第16回です。今回は、フォームの入力値を取得し、簡単なチェックを行います。

今回作るもの

名前とメールアドレスを入力し、未入力ならエラーメッセージを表示する学習用フォームを作ります。

この記事のバリデーションは学習用です。本番ではHTMLの制約、サーバー側検証、セキュリティ対策も必要です。

Step 1: HTMLを用意する

forms.html を作ります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>フォーム入力</title>
  </head>
  <body>
    <form id="profileForm">
      <label>
        名前
        <input id="nameInput" type="text">
      </label>
      <label>
        メール
        <input id="emailInput" type="email">
      </label>
      <button type="submit">送信</button>
    </form>
    <p id="message"></p>

    <script src="forms.js"></script>
  </body>
</html>

Step 2: submitイベントを受け取る

フォーム送信時の処理を書きます。

const profileForm = document.querySelector("#profileForm");
const message = document.querySelector("#message");

profileForm.addEventListener("submit", (event) => {
  event.preventDefault();
  message.textContent = "送信されました";
});

preventDefault() は、フォームの標準送信を止めます。学習用に画面遷移せず確認したい時に使います。

Step 3: 入力値を取得する

input 要素の値は .value で取得できます。

const profileForm = document.querySelector("#profileForm");
const nameInput = document.querySelector("#nameInput");
const emailInput = document.querySelector("#emailInput");
const message = document.querySelector("#message");

profileForm.addEventListener("submit", (event) => {
  event.preventDefault();

  console.log(nameInput.value);
  console.log(emailInput.value);
});

Consoleで入力値を確認します。

Step 4: 未入力をチェックする

空白だけの入力も弾けるように trim() を使います。

profileForm.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();

  if (name === "" || email === "") {
    message.textContent = "名前とメールを入力してください";
    return;
  }

  message.textContent = `${name}さん、入力を受け付けました`;
});

return を使うと、エラー時に後続処理を止められます。

Step 5: メールらしさを確認する

簡単な確認として @ が含まれるかを見ます。

if (!email.includes("@")) {
  message.textContent = "メールアドレスの形式を確認してください";
  return;
}

これは学習用の最小チェックです。完全なメール検証ではありません。

注意: ブラウザ側のチェックは改ざんできます。本番では、必ずサーバー側でも入力値を検証します。

よくあるエラー

エラーよくある原因確認する場所
画面がリロードされるpreventDefault() 忘れsubmitイベント
入力値が取れないinput のid違いHTMLとJSのセレクタ
空白が通るtrim() を使っていない入力チェック

次のステップ

JavaScript入門 #17 - JSONの基本 で、データを文字列として扱う方法を学びます。

まとめ

フォームでは、submit イベントを受け取り、event.preventDefault() で標準送信を止め、.value で入力値を取得します。入力チェックは、学習用と本番用を分けて考えることが重要です。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR