You can do something like this:

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length) {
      setClientErrors(errs);
      return;
    }
    setClientErrors({});
    const fd = new FormData(e.currentTarget);
    // call the server action with the form data
    await formAction(fd);
  };

but, if you are going to need client-side form validation I would recommend just using a lib like react-hook-form or formik. These libraries often will give you a submit func to call for your form, and it will automatically run the validation, and ONLY IF validation passes will the submit func then execute.

Using e.preventDefault in an if check only is bad practice?


For example


const submit = (e) =>{
if(!email){
e.preventDefault()
return;
}
}


Then if it doesn't go in the if check, I would presume it simply continues with the submission.

Else should stop the action from executing.

This is the current implementation I have right now.
However Chatgpt and Gemini claim this is wrong and I should manually trigger the action if I use onsubmit in combination of form action.

Meaning shouldn't have action and on submit event handlers on the form element.

Yes follow what they are telling you.

e.preventDefsult is to ensure that the native browser form submission process does not happen.

In your case you just want to manually trigger your server action in the forms submit handler.

So to summarize, if you want client side validation, you should also delegate the task of form submission to the client, meaning always do preventDefault so client can do what it wants.