Reactで未入力チェックのバリデーションを実装する方法

Reactで未入力チェックのバリデーションを実装

Reactで未入力チェックのバリデーションを実装する方法について、以下に例を示します。
エラーメッセージは日本語にしています。

import React, { useState } from 'react';

const SimpleForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({ name: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const validate = () => {
    const newErrors = { name: '', email: '' };
    let isValid = true;

    if (!formData.name) {
      newErrors.name = '名前は必須です';
      isValid = false;
    }

    if (!formData.email) {
      newErrors.email = 'メールアドレスは必須です';
      isValid = false;
    }

    setErrors(newErrors);
    return isValid;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      console.log('フォームが送信されました:', formData);
      // フォーム送信処理をここに追加
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          名前:
          <input type="text" name="name" value={formData.name} onChange={handleChange} />
        </label>
        {errors.name && <p style={{ color: 'red' }}>{errors.name}</p>}
      </div>
      <div>
        <label>
          メールアドレス:
          <input type="text" name="email" value={formData.email} onChange={handleChange} />
        </label>
        {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      </div>
      <button type="submit">送信</button>
    </form>
  );
};

export default SimpleForm;

説明

1. 状態管理

• formData：フォームの入力データを保持します。
• errors：各入力フィールドのエラーメッセージを保持します。

2. handleChange関数

• 入力フィールドの変更を処理し、formDataの状態を更新します。

3. validate関数

• 入力フィールドが未入力の場合、エラーメッセージを設定します。
• 入力データが有効かどうかをチェックし、その結果を返します。

4. handleSubmit関数

• フォーム送信時にバリデーションを実行します。
• バリデーションが成功した場合、フォームデータを送信します（ここではコンソールにログを出力）。

この例では、フォームの名前とメールアドレスの入力フィールドが未入力の場合にエラーメッセージが表示されるようになっています。
必要に応じて、さらに複雑なバリデーションや他のフィールドを追加することも可能です。