Submit a form after event.preventDefault (event.preventDefault behavior)

Question

I made a register page and want it does some validation before submission. So, I put event.preventDefault in my handleSubmit function. event.preventDefault is to prevent the default function, so if the form is blank, then it wont submit. But, after I fill all blanks, it can submit. My question is event.preventDefault still in the handleSubmit function after blanks filled, why can the form be submitted? Or, if user fills all blanks, the event.preventDefault will be disabled?

Thanks!

export default function RegisterPage() {
  const [values, setValues] = useState({
    userName: "",
    nickName: "",
    password: "",
  });

  const [errors, setErrors] = useState({});
  const [apiResError, setApiResError] = useState("");

  const handleSubmit = (e) => {
    setApiResError("");
    e.preventDefault();
    registerAccount(values.userName, values.nickName, values.password).then(
      (res) => {
        console.log(res);
      }
    );
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const handleFocus = (e) => {
    const { name } = e.target;
    setErrors({ ...errors, [name]: "" });
  };

  return (
    <RegisterPageContainer>
      <RegisterPageTitle>Register</RegisterPageTitle>
      {apiResError && <div>{apiResError}</div>}
      <RegisterForm onSubmit={handleSubmit}>
        <InputWrapper>
          <UserNameInput
            name="userName"
            type="text"
            placeholder="Username"
            onChange={handleChange}
            value={values.userName}
            onFocus={handleFocus}
          />
        </InputWrapper>
        {errors.userName && <div>{errors.userName}</div>}
        <InputWrapper>
          <NickNameInput
            name="nickName"
            type="text"
            placeholder="Nickname"
            onChange={handleChange}
            value={values.nickName}
            onFocus={handleFocus}
          />
        </InputWrapper>
        {errors.nickName && <div>{errors.nickName}</div>}
        <InputWrapper>
          <PasswordInput
            name="password"
            type="password"
            placeholder="Enter your password"
            onChange={handleChange}
            value={values.password}
            onFocus={handleFocus}
          />
        </InputWrapper>
        {errors.password && <div>{errors.password}</div>}
        <SubmitBtn>Create An Account</SubmitBtn>
      </RegisterForm>
    </RegisterPageContainer>
  );
}

Answer 1

e.preventDefault() is to prevent the form from making an http call. If you don't use that in a form submission, the page will refresh every time you submit a form.

It really has nothing to do with blocking submission when the values are empty or anything. You have to program validation logic yourself.

Your registerAccount function will fire every time you hit submit. e.preventDefault() won't block it.