Cant solve Email Validation using React Hooks

Question

I'm new to react and programing. I am trying to implement a email validation using this platform. https://upmostly.com/tutorials/form-validation-using-custom-react-hooks.

Desire outcome: Users must enter an email, otherwise it will show red text below input field. If you think I should use another library like react-hook-forms, please let me know

Please check out my work below. Thank you in advance.

Not working: I still click submit and the message(Email is invalid) doesn't come up

This is the step where the email should be validated
const Step3 = (props) => {
  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const {
    handleChange,
    handleSubmit,
  } = useForm(validate);

  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {
    }
  }, [errors]);

  const onChange = (event) => {
    event.persist();
    setValues(values => ({ ...values, [event.target.name]: event.target.value }));
  };  
  const onSubmit = (event) => {
    if (event) event.preventDefault();
    setErrors(validate(values));
    setIsSubmitting(true);
  };
  return (
    <WizardStep>
      <WizardProgress className="text-primary">
        Question {props.currentStep}/{props.totalSteps}
      </WizardProgress>
      <StepTitle>What is your email address?</StepTitle>
      <WizardFormWrapper>
        <WizardFormGroup controlId="userEmailGroup">
          <StyledTextInput
            type="email"
            autoComplete="off"
            className={`input ${errors.email && 'is-danger'}`}
            name="email"
            label="Email"
            placeholder="Email"
            onChange={onChange}
            value={values.email}
            required
          />
          {errors.email && (
                    <p className="help is-danger">{errors.email}</p>
                  )}
        </WizardFormGroup>
      </WizardFormWrapper>
      <WizardButtonGroup>
        <Link to="/feed">
          <SubmitButton primary="true" onSubmit={onSubmit}>
            Submit
          </SubmitButton>
        </Link>
      </WizardButtonGroup>
    </WizardStep>
  );
};



This is the validation method 
export default function validate(values) {
  let errors = {};
  if (!values.email) {
    errors.email = 'Email address is required';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = 'Email address is invalid';
  }
  if (!values.password) {
    errors.password = 'Password is required';
  } else if (values.password.length < 8) {
    errors.password = 'Password must be 8 or more characters';
  }
  return errors;
};

Answer 1

Try changing your button onSubmit to onClick?

Aside from some unused useForm variables it seems like the the code is fine. Here's a simplified version without the extra components and such. I didn't change any of the primary functionality:

const {
  useState,
  useEffect
} = React

const Step3 = (props) => {
  const [values, setValues] = useState({
    email: '',
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  //  const {
  //    handleChange,
  //    handleSubmit,
  //  } = useForm(validate);

  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {}
  }, [errors]);

  const onChange = (event) => {
    event.persist();
    setValues(values => ({ ...values,
      [event.target.name]: event.target.value
    }));
  };
  const onSubmit = (event) => {
    if (event) event.preventDefault();
    setErrors(validate(values));
    setIsSubmitting(true);
  };
  return ( <div>
    <input
    type = "email"
    autoComplete = "off"
    className = "none"
    name = "email"
    label = "Email"
    placeholder = "Email"
    onChange = {
      onChange
    }
    value = {values.email}
    required />
    {
      errors.email && ( <p className = "help is-danger">{errors.email}</p>
      )
    }
    <button type="submit" onClick={onSubmit}>Submit</button>
    </div>
  );
};

function validate(values) {
  let errors = {};
  if (!values.email) {
    errors.email = 'Email address is required';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = 'Email address is invalid';
  }
  if (!values.password) {
    errors.password = 'Password is required';
  } else if (values.password.length < 8) {
    errors.password = 'Password must be 8 or more characters';
  }
  return errors;
};

ReactDOM.render( < Step3 / > , document.getElementById("main"))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<main id="main"></main>