Form Validation

Example

import { useState } from 'react';

function validate({ email, password }) {
  const errors = {};
  if (!email.includes('@')) errors.email = 'Enter a valid email';
  if (password.length < 6) errors.password = 'At least 6 characters';
  return errors;
}

export default function App() {
  const [values, setValues] = useState({ email: '', password: '' });
  const [errors, setErrors] = useState({});
  const [ok, setOk] = useState(false);

  const onChange = (e) => setValues({ ...values, [e.target.name]: e.target.value });
  const onSubmit = (e) => {
    e.preventDefault();
    const found = validate(values);
    setErrors(found);
    setOk(Object.keys(found).length === 0);
  };
  const err = { color: 'crimson', fontSize: 13, margin: 0 };
  return (
    <form onSubmit={onSubmit}>
      <input name="email" placeholder="Email" value={values.email} onChange={onChange} />
      {errors.email && <p style={err}>{errors.email}</p>}
      <input name="password" type="password" placeholder="Password" value={values.password} onChange={onChange} />
      {errors.password && <p style={err}>{errors.password}</p>}
      <div><button>Sign up</button></div>
      {ok && <p style={{ color: 'green' }}>Form is valid!</p>}
    </form>
  );
}

Result