即使验证要求无效，数据仍在发送，处理此问题的最佳方法是什么

Question

所以我用一个简单的验证设置了一个自定义的react hook表单(验证有效(，表单中的数据被发送到我的Gmail，但我在按钮提交时收到电子邮件，即使字段为空，我也尝试了一些方法来解决这个问题，但似乎什么都不起作用，代码如下：

Form.js:

import React from "react";
import useForm from "./useForm";
import validate from "./validate";

const Form = () => {
    const { handleChange, handleSubmit, values, errors } = useForm(
        submit,
        validate
    );
   
    function submit() {
        alert("Submitted Succesfully");
    }
    return (
        <div>
           
            <form onSubmit={handleSubmit} noValidate>
                <div className="inputField">
                    <input className={`${errors.email && "inputError"}`} name="email" type="email" placeholder="Your email *" value={values.email} onChange={handleChange} />
                    {errors.email && <p className="error">{errors.email}</p>}
                </div>
                <div className="inputField">
                    <input className={`${errors.email && "inputError"}`} name="name" type="text" placeholder="Your name *" value={values.name} onChange={handleChange} />
                    {errors.email && <p className="error">{errors.name}</p>}
                </div>
                <div className="inputField">
                    <input className={`${errors.email && "inputError"}`} name="subject" type="text" placeholder="Subject *" value={values.subject} onChange={handleChange} />
                    {errors.email && <p className="error">{errors.subject}</p>}
                </div>
                <div className="inputField">
                    <p className="reqTxt"> * = Required</p>
                    <textarea className={`${errors.email && "inputError"}`} name="description" placeholder="Type your message here *" value={values.description} onChange={handleChange} rows="15" cols="80"></textarea>
                    {errors.email && <p className="error">{errors.description}</p>}
                </div>

                <button className="btn" type="submit">Send message</button>
            </form>
        </div>
    );
};

useForm.js:

import { useState, useEffect } from "react";
import axios from 'axios';
const useForm = (callback, validate) => {
  const [values, setValues] = useState({ email: '', name: '', subject: '', description: '' })
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  const handleChange = event => {
    const { name, value } = event.target;
    setValues({
      ...values,
      [name]: value
    });
  };
  
  const handleSubmit = (event) => {
    event.preventDefault();
    setErrors(validate(values));
    setIsSubmitting(true);
    const {email,name,subject,description} = values;
    
    axios.post('http://localhost:8080/sendme', {
            
            email,
            name,
            subject,
            text: description
        })
  };
  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {
      callback();
    }
  }, [callback,isSubmitting,errors]);
  return {
    handleChange,
    handleSubmit,
    values,
    errors
  };
};
export default useForm;

validate.js:

export default function validate(values) {
    let errors = {};
    if (!values.email) {
        errors.email = "Email is required";
    } else if (!/S+@S+.S+/.test(values.email)) {
        errors.email = "Email address is invalid, ex: [e-mail]";
    }
    if (!values.name) {
        errors.name = "Please type in your name.";
    }
    if (!values.subject) {
        errors.subject = "Please don't leave the subject field empty.";
    }
    if (values.description.length < 20) {
        errors.description = "Your message needs to be more than 20 characters.";
    }
    return errors;
}

最好的方法是什么(只在表单验证=true或其他什么之后发送数据(？我也想知道如何显示"；成功；成功提交表单后的消息。

如果有人能就此给我建议或提供解决方案，我将不胜感激。

Answer 1

在useForm钩子(handleSubmit方法(中，如果出现任何错误，则不会停止该方法。如果出现错误，您应该从函数返回。

类似的东西

const handleSubmit = (event) => {
    event.preventDefault();
    const errors = validate(values);
    if (Object.keys(errors).length > 0) {
       setErrors(errors);
       return;
    }
    setIsSubmitting(true);
    const {email,name,subject,description} = values;
    
    axios.post('http://localhost:8080/sendme', {
            
            email,
            name,
            subject,
            text: description
        })
  };