validate forms hook

1. use-validator.ts

import { useCallback, useMemo, useState } from 'react';

const useValidator = <T extends Record<string, string>>(validator: () => T) => {
  const [errors, setErrors] = useState<Partial<T>>({})

  return useMemo(() => ({
    validate: () => {
      setErrors(validator())
      return Object.values(errors).every((x) => !x)
    },
    reset: () => setErrors({}),
    errors
  }), [errors, validator])
}

2. example.tsx

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

function App() {
  const [data, setData] = useState({
    name: '',
    middlename: '',
    surname: ''
  })

  const { errors, validate, reset } = useValidator(useCallback(() => ({
    name: data.name ? '' : 'Name is required',
    middlename: data.middlename ? '': 'Middlename is required',
    surname: data.surname ? '' : 'Surname is required'
  }), [data]))

  const doReset = useCallback(() => {
    setData({ name: '', middlename: '', surname: '' })
    reset()
  }, [reset])

  const doSubmit = useCallback(() => {
    if (!validate()) {
      console.error('Please enter the required fields')
      return
    }
    console.log('Submiting form...')
  }, [validate])

  return (
    <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 500 }}>
      <TextField
        required
        label="Name"
        value={data.name}
        onChange={(e) => setData((val) => ({ ...val, name: e.target.value }))}
        error={!!errors.name}
        helperText={errors.name}
      />
      <TextField
        required
        label="Middlename"
        value={data.middlename}
        onChange={(e) => setData((val) => ({ ...val, middlename: e.target.value }))}
        error={!!errors.middlename}
        helperText={errors.middlename}
      />
      <TextField
        required
        label="Surname"
        value={data.surname}
        onChange={(e) => setData((val) => ({ ...val, surname: e.target.value }))}
        error={!!errors.surname}
        helperText={errors.surname}
      />
      <Button type="submit" onClick={doSubmit}>
        Save
      </Button>
      <Button type="reset" onClick={doReset}>
        Reset
      </Button>
    </form>
  );
}

export default App;