問題一覧に戻る
中級フォーム処理
問題50: フォームバリデーション

フォーム送信時の入力値検証とエラー表示を学びます。e.preventDefault()でデフォルトの送信動作を防ぎ、JavaScriptで検証ロジックを実装します。エラーがある場合はエラーメッセージをstateに保存し、条件付きレンダリングで表示します。実際のアプリケーションでは、メールアドレスの形式、パスワードの強度、必須項目の確認など様々な検証が必要です。ユーザーフレンドリーなエラーメッセージとリアルタイムバリデーションの実装も重要です。

import React, { useState } from 'react';

function Login() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    {/* バリデーション処理 */}
    if (!email.includes("@")) {
      ("メール形式エラー");
    }
  };

  return (
    <form onSubmit={}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      {/* エラー表示 */}
      {error && <p>{}</p>}
      <button>送信</button>
    </form>
  );
}

export default Login;
···