1. バリデーションとは何か

バリデーションとは、入力された値が正しいかどうかを確認することです。たとえば、名前欄が空のまま送信されていないか、文字数が極端に少なくないかなどを確認します。これは、申込書に何も書かれていない状態で提出されるのを防ぐ作業と同じです。

2. なぜ入力チェックが必要なのか

入力チェックをしないと、空白のデータや意味のない内容が送られてしまいます。それにより、後から確認する人が困ったり、正しく処理できなくなることがあります。 Reactのフォーム処理では、送信前に簡単な確認を入れるのが基本です。

3. 空欄かどうかをチェックする方法

最も基本的なバリデーションは、入力欄が空かどうかを確認することです。何も書かれていない場合は、送信を止めて注意を表示します。


import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name === "") {
      alert("名前を入力してください");
      return;
    }
    alert("送信されました");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="名前"
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（名前が空のまま送信すると、注意メッセージが表示されます）

4. 文字数をチェックする簡易バリデーション

次によく使われるのが文字数の確認です。たとえば、名前が一文字だけだと、本当に正しい情報か分かりません。そのため、最低文字数を決めてチェックします。


import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name.length < 2) {
      alert("名前は2文字以上入力してください");
      return;
    }
    alert("問題なく送信されました");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="名前"
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（2文字未満の場合、送信が止まります）

5. エラーメッセージを画面に表示する

alertだけでなく、画面の中にエラーメッセージを表示する方法もあります。これは、紙に赤ペンで注意書きをするイメージです。 Stateを使うことで簡単に実現できます。


import React, { useState } from "react";

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (email === "") {
      setError("メールアドレスを入力してください");
      return;
    }
    setError("");
    alert("送信成功");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="メールアドレス"
        onChange={(e) => setEmail(e.target.value)}
      />
      {error && <p class="text-danger">{error}</p>}
      <button type="submit">送信</button>
    </form>
  );
}

export default App;

（入力が空の場合、画面にエラーメッセージが表示されます）