サンプルプロジェクト：フォームバリデーションを含むウェブページの構築

このサンプルプロジェクトでは、JavaScriptを使って簡単なフォームバリデーションを実装したウェブページを構築します。ユーザーが入力フォームに適切な情報を入力したかどうかをリアルタイムでチェックし、不正な入力があった場合にエラーメッセージを表示します。

1. HTML構造の作成

まず、フォームを持つ基本的なHTMLを作成します。ユーザー名とメールアドレス、パスワードの3つの入力フィールドを用意し、送信ボタンを追加します。

html

<!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="styles.css">
</head>
<body>
  <div class="container">
    <h2>ユーザー登録フォーム</h2>
    <form id="registrationForm">
      <div class="form-group">
        <label for="username">ユーザー名:</label>
        <input type="text" id="username" name="username" required>
        <small class="error-message" id="usernameError"></small>
      </div>
      <div class="form-group">
        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email" required>
        <small class="error-message" id="emailError"></small>
      </div>
      <div class="form-group">
        <label for="password">パスワード:</label>
        <input type="password" id="password" name="password" required minlength="6">
        <small class="error-message" id="passwordError"></small>
      </div>
      <button type="submit">登録</button>
    </form>
  </div>
  <script src="script.js"></script>
</body>
</html>

2. CSSでスタイルを整える

フォームの見た目を整えるために、簡単なスタイルを追加します。

css

/* styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

.error-message {
  color: red;
  font-size: 0.875em;
}

3. JavaScriptでフォームバリデーションを実装

JavaScriptを使って、ユーザーの入力が正しいかどうかを確認するバリデーションを行います。

javascript

// script.js
document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('registrationForm');
  const username = document.getElementById('username');
  const email = document.getElementById('email');
  const password = document.getElementById('password');
  const usernameError = document.getElementById('usernameError');
  const emailError = document.getElementById('emailError');
  const passwordError = document.getElementById('passwordError');

  form.addEventListener('submit', (e) => {
    let isValid = true;

    // ユーザー名のバリデーション
    if (username.value.trim() === '') {
      usernameError.textContent = 'ユーザー名を入力してください。';
      isValid = false;
    } else {
      usernameError.textContent = '';
    }

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

    // パスワードのバリデーション
    if (password.value.trim().length < 6) {
      passwordError.textContent = 'パスワードは6文字以上で入力してください。';
      isValid = false;
    } else {
      passwordError.textContent = '';
    }

    // フォームが無効な場合、送信をキャンセル
    if (!isValid) {
      e.preventDefault();
    } else {
      // バックエンドへのデータ送信
      e.preventDefault();
      const formData = {
        username: username.value,
        email: email.value,
        password: password.value
      };

      fetch('https://example.com/api/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      })
        .then(response => {
          if (!response.ok) {
            throw new Error('登録に失敗しました。');
          }
          return response.json();
        })
        .then(data => {
          alert('登録が完了しました！');
          console.log('登録データ:', data);
        })
        .catch(error => {
          alert('エラーが発生しました: ' + error.message);
        });
    }
  });
});

解説

HTML部分では、ユーザー名、メールアドレス、パスワードの入力フィールドを持つフォームを作成しました。それぞれのフィールドには required 属性を追加して、入力が必須であることを示しています。
CSS部分では、フォーム全体の見た目を整え、エラーメッセージのスタイルを設定しています。
JavaScript部分では、フォームの submit イベントに対してバリデーション処理を追加しました。username、email、password の各入力フィールドをチェックし、不正な入力があればエラーメッセージを表示し、フォームの送信を防ぎます。また、バリデーションが通った場合は、fetch を使ってバックエンドにデータを送信し、登録処理を行います。

まとめ

このサンプルプロジェクトを通じて、JavaScriptを使った基本的なフォームバリデーションの実装方法を学びました。これにより、ユーザーが正しい情報を入力することを促し、エラーを未然に防ぐことができます。また、fetch を使ってデータをサーバーに送信し、実際の登録処理を行う方法も学びました。このようにして、フロントエンドとバックエンドを連携させた実用的なフォームを構築することができます。

サンプルプロジェクト： フォームバリデーションを含むウェブページの構築

1. HTML構造の作成 ​

2. CSSでスタイルを整える ​

3. JavaScriptでフォームバリデーションを実装 ​

解説 ​

まとめ ​

サンプルプロジェクト：フォームバリデーションを含むウェブページの構築

1. HTML構造の作成

2. CSSでスタイルを整える

3. JavaScriptでフォームバリデーションを実装

解説

まとめ