ReactとMaterial-UIを用いたフォームバリデーション

目次

ReactとMaterial-UIを用いたフォームバリデーション

ReactとMaterial-UIを使用してフォームフィールドのバリデーションを行う方法について解説します。
今回はメールアドレスの入力フィールドに対して、適切なフォーマットのバリデーションを行う例を紹介します。

基本的な構成

バリデーションを行うためには、以下のステップに従います。

1. Stateの設定: ユーザーの入力とバリデーション結果を追跡するためのstateを設定します。
   
2. バリデーション関数の作成: 入力された値をチェックする関数を作成します。
   
3. イベントハンドラの設定: 入力の変更ごとにバリデーションを実行します。
   
4. エラーメッセージの表示: バリデーションの結果に基づいて、エラーメッセージを表示します。
   

コード例

以下のコードは、メールアドレスのバリデーションを行うシンプルなReactコンポーネントの例です。

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';

function EmailInput() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState(false);
  const [helperText, setHelperText] = useState('');

  // メールアドレスのフォーマットをチェックする関数
  const validateEmail = (email) => {
    const re = /^(([^<>()\]\\.,;:\s@"]+(\.[^<>()\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email.toLowerCase());
  };

  // テキストフィールドの値が変更された時に実行されるハンドラ
  const handleChange = (event) => {
    const { value } = event.target;
    setEmail(value);
    if (validateEmail(value)) {
      setError(false);
      setHelperText('');
    } else {
      setError(true);
      setHelperText('有効なメールアドレスを入力してください。<br>');
    }
  };

  return (
    <TextField
      error={error}
      helperText={helperText}
      label="メールアドレス"
      variant="outlined"
      value={email}
      onChange={handleChange}
    />
  );
}

export default EmailInput;

このコードは、ユーザーがメールアドレスを入力するたびに、そのフォーマットが正しいかどうかをチェックします。
フォーマットが正しくない場合には、エラーメッセージが表示されます。

まとめ

この記事では、ReactとMaterial-UIを使用してフォームフィールドのバリデーションを行う基本的な方法を紹介しました。
この基本的な概念は、さまざまな種類のバリデーションロジックに応用することが可能です。