CODEWITHSUNDEEP
javascriptreactjsformsemail
Lazarusss
Lazarusss

Reputation: 19

EmailJs and Form Validation problem, React

I've got a problem with sending emails in React by EmailJs. When i validate form and all the errors desapears, form is sending email only after second click and i dont really know why this is happening why. Please help

const useForm = (callback, validate) => {
  const [values, setValues] = useState({
    title: "",
    email: "",
    message: "",
  });
  const [errors, setErrors] = useState({});
  const [send, setSend] = useState(false);
  const [isSubmiting, setIsSubmiting] = useState(false);

  useEffect(() => {
    if (Object.keys(errors).length === 0) {
      if (isSubmiting) {
        setSend(true);
      }
    }
  }, [errors]);

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

  const handleSubmit = (e) => {
    e.preventDefault();
    setErrors(validate(values));
    setIsSubmiting(true);
    if (send) {
      emailjs
        .sendForm(
          "service",
          "templatekey",
          e.target,
          "userkey"
        )
        .then(
          (result) => {
            console.log(result.text);
          },
          (error) => {
            console.log(error.text);
          }
        );
      e.target.reset();
    }
  };

  return { handleChange, values, handleSubmit, errors };
};

export default useForm;

Upvotes: 0

Views: 1863

Answers (2)

Forge
Forge

Reputation: 1

I ran into the same problem and found that adding an 'onClick' event handler to your form button will prevent the user from needing to double click.

<button onClick={handleClick}> Submit </button>

in useForm.js I moved setErrors(validate(values)); and setIsSubmitting(true); into handleClick

function handleClick() {
    setErrors(validate(values));
    setIsSubmitting(true);
};

const handleSubmit = e => {
    e.preventDefault();

    if (send) {
        emailjs.sendForm('service', 'templateKey', e.target, 'userKey')
            .then((result) => {
                console.log(result.text);
            }, (error) => {
                console.log(error.text);
            });
        callback();
    }
};

Upvotes: 0

Lazarusss
Lazarusss

Reputation: 19

After moving setErrors(validate(values)) and setIsSubmiting(true) to handleChange it works fine for me :)

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

};

const handleSubmit = (e) => {
e.preventDefault();
if (send) {
  console.log("WYSYŁAM");
  emailjs
    .sendForm(
      "service",
      "template",
      e.target,
      "user"
    )
    .then(
      (result) => {
        console.log(result.text);
      },
      (error) => {
        console.log(error.text);
      }
    );
  e.target.reset();
}

};

return { handleChange, values, handleSubmit, errors }; };

Upvotes: 1

Related Questions