I've the singup page and I'm want to use server action to post the data to the db. All works fine just I want to validate the data before making call to server action.
I've managed to do this using onSubmit but somehow can't figure how to do this using server action cause when the submit button is clicked it straight away calls the action without checking it on client side.

Sign Up form

const SignUpForm = () => {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      name: "",
      email: "",
      password: "",
      confirmPassword: "",
    },
  });

  const onSubmit = (values: z.infer<typeof FormSchema>) => {
    console.log(values);
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
        // ui
    </Form>
  );
};

Server Action

const FormSchema = z.object({
  name: z.string().min(1, "name is required").max(100),
  email: z.string().min(1, "Email is required").email("Invalid email"),
  password: z
    .string()
    .min(1, "Password is required")
    .min(8, "Password must have than 8 characters"),
});

export async function createUser(formData: FormData) {
  const validatedFields = FormSchema.safeParse({
    name: formData.get("name"),
    email: formData.get("email"),
    password: formData.get("password"),
  });
  // check if the form data is passes type check
  if (!validatedFields.success) {
    return {
      message: "Missing Fields. Failed to Create User.",
    };
  }

  const { name, email, password } = validatedFields.data;

  try {
   // logic
    return {
      message: "User is registered successfully",
    };
  } catch (error) {
    return {
      message: "Database Error: Failed to Create User.",
    };
  }
}