NextJS×ReactJS× Typescriptでフォームバリデーション実装！npmパッケージを使用しない実装方法😎

import React from 'react';
import { useForm, NestedValue } from 'react-hook-form';
import { Autocomplete, TextField, Select } from '@material-ui/core';
import { Autocomplete } from '@material-ui/lab';

type Option = {
  label: string;
  value: string;
};

const options = [
  { label: 'Chocolate', value: 'chocolate' },
  { label: 'Strawberry', value: 'strawberry' },
  { label: 'Vanilla', value: 'vanilla' },
];

export default function App() {
  const { register, handleSubmit, watch, setValue, formState: { errors } } = useForm<{
    autocomplete: NestedValue<Option[]>;
    select: NestedValue<number[]>;
  }>({
    defaultValues: { autocomplete: [], select: [] },
  });
  const onSubmit = handleSubmit((data) => console.log(data));

  React.useEffect(() => {
    register('autocomplete', {
      validate: (value) => value.length || 'This is required.',
    });
    register('select', {
      validate: (value) => value.length || 'This is required.',
    });
  }, [register]);

  return (
    <form onSubmit={onSubmit}>
      <Autocomplete
        options={options}
        getOptionLabel={(option: Option) => option.label}
        onChange={(e, options) => setValue('autocomplete', options)}
        renderInput={(params) => (
          <TextField
            {...params}
            error={Boolean(errors?.autocomplete)}
            helperText={errors?.autocomplete?.message}
          />
        )}
      />

      <Select value="" onChange={(e) => setValue('muiSelect', e.target.value as number[])}>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
      </Select>

      <input type="submit" />
    </form>
  );
}

import styles from '~/styles/pages/Sample.module.scss'
import React, { Component } from 'react'
import { ReactNode } from '~/node_modules/@types/react'

enum INPUT_NAME {
  name = 'name',
  address = 'address'
}

type ERROR = {
  message: string
}

type LABEL = {
  [key in INPUT_NAME]?: string
}

interface State {
  inputValues: {
    [key in INPUT_NAME]?: string
  }
  inputError?: {
    [key in INPUT_NAME]?: ERROR
  }
}

export default class Sample extends Component<unknown, State> {
  label: LABEL = {
    [INPUT_NAME.name]: '氏名',
    [INPUT_NAME.address]: '住所'
  }

  constructor(props: any) {
    super(props)
    this.onChangeRequiredInput = this.onChangeRequiredInput.bind(this)
  }

  onChangeRequiredInput(name: INPUT_NAME, value?: string): void {
    const inputError = this.state && this.state.inputError ? this.state.inputError : {}
    const inputValues = this.state && this.state.inputValues ? this.state.inputValues : {}
    this.setState({
      inputValues: {
        [name]: value,
        ...inputValues
      }
    })
    if (!value || value === '') {
      this.setState({
        inputError: {
          [name]: {
            message: `${this.label[name]}は必須入力です。`
          },
          ...inputError
        }
      })
    } else {
      if(inputError && inputError[name]) delete inputError[name]
      this.setState({
        inputError
      })
    }
  }

  render() {
    const renderInput = (name: INPUT_NAME): ReactNode => {
      const inputError = this.state && this.state.inputError ? this.state.inputError : {}
      if (inputError && inputError[name]) {
        return <div className={styles.inputContainer}>
          <div className={styles.inputContainer__inputWithLabel}>
            <label className={styles.label} htmlFor='name'>{this.label[name]}</label>
            <input className={`${styles.input} ${styles['--error']}`} id='name' type='text' placeholder={this.label[name]}
                   onChange={(e) => this.onChangeRequiredInput(name, e.target.value)} />
          </div>
          <p className={styles.error}>{inputError[name]?.message}</p>
        </div>
      }
      return <div className={styles.inputContainer}>
        <div className={styles.inputContainer__inputWithLabel}>
          <label className={styles.label} htmlFor='name'>{this.label[name]}</label>
          <input className={`${styles.input}`} id='name' type='text' placeholder={this.label[name]}
                 onChange={(e) => this.onChangeRequiredInput(name, e.target.value)} />
        </div>
      </div>
    }

    return (
      <div className={styles.container}>
        <div className={styles.container__contentContainer}>
          {renderInput(INPUT_NAME.name)}
          {renderInput(INPUT_NAME.address)}
        </div>
      </div>
    )
  }
}

.container{
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  &__contentContainer{
    width: 500px;
    background: #fff;
    box-shadow: 0 0 8px gray;
    padding: 16px 0;
  }
}

.label{
  width: 50px;
}

.input{
  border: 1px #eee solid;
  box-shadow: 0 0 8px #eee;
  border-radius: 5px;
  padding: 10px 16px;
  flex: 1;
  &:focus{
    outline: none;
  }
  &.--error{
    background-color: pink;
  }
}

.error{
  margin: 10px 0 0 50px;
  color: red;
}

.inputContainer{
  padding: 16px;
  flex-wrap: wrap;
  border-radius: 5px;
  &__inputWithLabel{
    width: 100%;
    display: flex;
    align-items: center;
  }
}

enum INPUT_NAME {
  name = 'name',
  address = 'address'
}

type ERROR = {
  message: string
}

interface State {
  inputValues: {
    [key in INPUT_NAME]?: string
  }
  inputError?: {
    [key in INPUT_NAME]?: ERROR
  }
}