React MUI: TextField と react-form-hook による入力検証(ログイン画面サンプル)

スポンサーリンク

ログイン画面はシステム開発で多くの場合作成することになると思います。今回は、React MUI の TextField と react-form-hook を組み合わせた、ログイン画面の入力検証機能を実装するサンプルを紹介します。

スクリーンショット

フォーム送信前の状態です。
フォーム送信時にフィールドに入力が無いと、エラーが表示されます。

実装コード

App.tsx の実装コードを掲載します。

import React from "react";
import { useForm } from "react-hook-form";
import { Box, Button, TextField } from "@mui/material";

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data: any) => {
    console.log(data);
  };

  return (
    <Box>
      {/* フォームサブミット前に、handleSubmit が input
      コントロールの検証を行います。 */}
      <form
        onSubmit={handleSubmit(onSubmit)}
        style={{
          display: "flex",
          flexDirection: "column",
          width: "250px",
          margin: "3rem",
        }}
      >
        {/* register 関数を利用し、input コントロールを hook に登録します。 */}
        <TextField
          {...register("nameRequired", { required: true })}
          error={!!errors.nameRequired}
          id="name"
          label="名前"
          variant="outlined"
          helperText={!!errors.nameRequired && "名前を入力してください。"}
          style={{
            marginBottom: "1rem",
          }}
        />
        <TextField
          {...register("passwordRequired", { required: true })}
          error={!!errors.passwordRequired}
          id="password"
          label="パスワード"
          variant="outlined"
          type="password"
          helperText={
            !!errors.passwordRequired && "パスワードを入力してください。"
          }
          style={{
            marginBottom: "1rem",
          }}
        />
        <Button variant="contained" color="primary" type="submit">
          送信
        </Button>
      </form>
    </Box>
  );
}

export default App;

参考情報

react-form-hook と MUI、それぞれの公式サイトの実装例を参考にしました。

Get Started
Performant, flexible and extensible forms with easy-to-use validation.
Text field React component - Material UI
Text fields let users enter and edit text.

サンプルアプリケーション

コメント

タイトルとURLをコピーしました