第9回：JavaScriptを使ったフォームのバリデーションと送信機能

2024-08-102024-08-16

今回はJavaScriptを使ってフォームの入力内容をチェックするバリデーションと、データを送信する方法について学びます。
また問い合わせフォームを全ページで表示するために、フッター内にフォームを配置する方法を説明します。
少しずつ進めれば大丈夫ですので、一緒に取り組んでいきましょう！

フォームバリデーションの基本

フォームバリデーションには、だいたい以下のようなチェックが含まれます。

必須フィールドのチェック
メールアドレス形式のチェック
最小/最大文字数のチェック
パスワードの一致確認

HTMLの修正

まず基本的なフォームのHTMLを作成し、それに対してバリデーションを行うJavaScriptを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カフェサイト</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <header>
    <h1>カフェへようこそ</h1>
    <nav>
      <a href="index.html">ホーム</a>
      <a href="menu.html">メニュー</a>
      <a href="contact.html">お問い合わせ</a>
    </nav>
  </header>
  <main>
    <div class="filter-buttons">
      <button id="all">全て</button>
      <button id="coffee">コーヒー</button>
      <button id="dessert">デザート</button>
    </div>
    <div class="menu-container">
      <div class="menu-item" data-category="coffee">
        <h2>エスプレッソ</h2>
        <p>濃厚な味わいのエスプレッソです。</p>
      </div>
      <div class="menu-item" data-category="dessert">
        <h2>チーズケーキ</h2>
        <p>濃厚でクリーミーなチーズケーキです。</p>
      </div>
      <!-- 他のメニュー項目 -->
    </div>
  </main>
  <footer>
    <h2>お問い合わせフォーム</h2>
    <form id="contactForm">
      <label for="name">名前 (必須)</label>
      <input type="text" id="name" name="name" required>
      <span class="error" id="nameError"></span>

      <label for="email">メールアドレス (必須)</label>
      <input type="email" id="email" name="email" required>
      <span class="error" id="emailError"></span>

      <label for="message">メッセージ (必須)</label>
      <textarea id="message" name="message" required></textarea>
      <span class="error" id="messageError"></span>

      <button type="submit">送信</button>
    </form>
    <p>© 2024 カフェサイト. All rights reserved.</p>
  </footer>
</body>
</html>

ここでは以下の2点に注目してみてください。

required: 設定された入力欄を必須入力にします。
span class=”error”: エラーメッセージを表示する要素をあらかじめ用意します。
JavaScriptでバリデーションチェックした時に初めて要素が現れたほうがかっこいいのですが、少々難易度が上がりますので、今日はあらかじめ用意してしまいます。

JavaScriptによるバリデーション

次にフォームバリデーションを行うJavaScriptを作成します。

document.addEventListener("DOMContentLoaded", function() {
  const form = document.getElementById("contactForm");
  const name = document.getElementById("name");
  const email = document.getElementById("email");
  const message = document.getElementById("message");
  const nameError = document.getElementById("nameError");
  const emailError = document.getElementById("emailError");
  const messageError = document.getElementById("messageError");

  form.addEventListener("submit", function(event) {
    let valid = true;

    // 名前のバリデーション
    if (name.value.trim() === "") {
      valid = false;
      nameError.textContent = "名前を入力してください。";
    } else {
      nameError.textContent = "";
    }

    // メールアドレスのバリデーション
    if (!validateEmail(email.value)) {
      valid = false;
      emailError.textContent = "有効なメールアドレスを入力してください。";
    } else {
      emailError.textContent = "";
    }

    // メッセージのバリデーション
    if (message.value.trim() === "") {
      valid = false;
      messageError.textContent = "メッセージを入力してください。";
    } else {
      messageError.textContent = "";
    }

    // バリデーションに失敗した場合、フォーム送信を中止
    if (!valid) {
      event.preventDefault();
    }
  });

  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  }
});

ここでは以下の3点に注目してみてください。

form.addEventListener(“submit”, function(event) {…}): バリデーション（チェック）を行うタイミングを、フォームが送信される前にします。
validateEmail: メールアドレスの形式をチェックします。
ここでは正規表現というものを使って、形式が一致するかしないかを判定しています。
if (!valid) {…}): 各フィールドのバリデーションを行います。
不正な入力があればエラーメッセージを表示して、フォーム送信を中止します。

フォーム送信機能の追加

フォームのバリデーションが成功した場合、フォームデータをサーバーに送信します。
ここではフォームデータをコンソールに表示する簡単な例を示します。

document.addEventListener("DOMContentLoaded", function() {
  const form = document.getElementById("contactForm");
  const name = document.getElementById("name");
  const email = document.getElementById("email");
  const message = document.getElementById("message");
  const nameError = document.getElementById("nameError");
  const emailError = document.getElementById("emailError");
  const messageError = document.getElementById("messageError");

  form.addEventListener("submit", function(event) {
    let valid = true;

    // 名前のバリデーション
    if (name.value.trim() === "") {
      valid = false;
      nameError.textContent = "名前を入力してください。";
    } else {
      nameError.textContent = "";
    }

    // メールアドレスのバリデーション
    if (!validateEmail(email.value)) {
      valid = false;
      emailError.textContent = "有効なメールアドレスを入力してください。";
    } else {
      emailError.textContent = "";
    }

    // メッセージのバリデーション
    if (message.value.trim() === "") {
      valid = false;
      messageError.textContent = "メッセージを入力してください。";
    } else {
      messageError.textContent = "";
    }

    // バリデーションに失敗した場合、フォーム送信を中止
    if (!valid) {
      event.preventDefault();
    } else {
      // フォームデータの送信
      const formData = {
        name: name.value.trim(),
        email: email.value.trim(),
        message: message.value.trim()
      };
      console.table(formData);
      event.preventDefault();
    }
  });

  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  }
});

ここでは以下の2点に注目してみてください。

formData: オブジェクト（データの塊）を作成して、そこに入力された値を格納します。
console.table: 送信されたデータをコンソールに表示します。
console.logのほうが汎用性が高く有名で、聞いたことがあるかたもいらっしゃるかもしれません。
ですがここではオブジェクトを表示するのでconsole.tableを使用することにします。

カフェサイトへの適用例

以下にバリデーションと送信機能を追加したカフェサイトの最終的なHTMLとJavaScriptのコードを示します。
ちょっとレイアウトが崩れるのでCSSを追記して調整します。

footer form * {
  display: block;
  text-align: left;
}

カフェへようこそ

プロジェクトの確認

index.htmlとstyle.cssを保存して、JavaScriptはscript.jsという名前で保存して、ブラウザ（google chromeやmicrosoft EDGEなど）でindex.htmlを開いてみましょう。
index.htmlをダブルクリックするとスムーズかと思います。

まずここまででカフェのWEBサイトが上記のように表示されることを確認してください。

まとめ

今回はフォームのバリデーションと送信機能を学びました。

最初は複雑に感じるかもしれませんが、実際に手を動かしてみることで理解が深まります。
うまくいかないことがあっても、それは成長のチャンスです。
何度も試して、少しずつ進んでいけば大丈夫。
自信を持って取り組んでいきましょう。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！