联系表单空提交时Yup与react-hook-form验证规则未触发问题咨询

核心问题点 #

• 你没有正确使用react-hook-form的提交校验机制：自定义的handleSubmit完全绕开了react-hook-form的校验逻辑，空表单提交时自然不会触发Yup规则校验，直接就执行了数据库写入操作。
• 表单元素没有和react-hook-form绑定：你额外声明了一堆useState存表单值，没有给输入框绑定register方法，react-hook-form根本无法收集表单值、触发校验。
• 下拉选框缺少name属性：你Yup规则里定义的下拉字段名为select，但实际页面里的<select>标签没有加name="select"，就算触发校验也匹配不到对应字段。
• 下拉选框初始值类型不匹配：selecttype的初始值你设成了空数组，但实际存储的是字符串类型，和Yup里定义的string类型规则冲突。

修复后的完整代码 #

import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { ErrorMessage } from "@hookform/error-message";
// 原代码缺失react导入，此处补全
import { useState } from 'react'
 
const schema = yup.object().shape({
  fullName: yup.string().required("请填写您的全名"),
  email: yup.string().email("请填写合法的邮箱地址").required("请填写您的邮箱"),
  select: yup
    .string()
    .oneOf(["webSolutions", "mobileSolutions", "devOps", "research", "uiux"], "请选择有效的服务类型")
    .required("请选择一项我们的服务"),
  message: yup.string().required("留言不能为空"),
});

const Contact = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      // 表单初始值直接在这里定义，不需要额外声明useState存储
      fullName: '',
      email: '',
      select: '',
      message: ''
    }
  });

  // 提交逻辑放在回调中，只有校验通过才会执行
  const onSubmit = (data) => {
    db.collection("contacts")
      .add({
        fullName: data.fullName,
        email: data.email,
        selecttype : data.select,
        message: data.message,
      })
      .then(() => {
        alert("留言已提交");
      })
      .catch((error) => {
        alert(error.message);
      });
  };

  return (
    <>
      <Container>
        <FormBg>
          <ImageBg>
            <Img src={Image} />
          </ImageBg>
        </FormBg>
        <FormWrap>
          <FormContent>
            {/* 用react-hook-form提供的handleSubmit包裹提交逻辑 */}
            <Form onSubmit={handleSubmit(onSubmit)}>
              <Icon to="/">
                <img src={dLogo} />
              </Icon>
              <FormH1>请在下方填写您的需求详情</FormH1>
              <FormLabel value="fullName">
                全名 <RequiredTag>*</RequiredTag>
              </FormLabel>
              <FormInput
                type="text"
                {/* 绑定register方法，关联字段名 */}
                {...register("fullName")}
              />
              <ErrorTag>
                <ErrorMessage errors={errors} name="fullName" />
              </ErrorTag>

              <FormLabel value="email">
                邮箱 <RequiredTag>*</RequiredTag>
              </FormLabel>
              <FormInput
                type="email"
                placeholder="example@email.com"
                {...register("email")}
              />
              <ErrorTag>
                <ErrorMessage errors={errors} name="email" />
              </ErrorTag>
              <FormLabel value="services">
                您需要我们为您提供什么服务？
                <RequiredTag>*</RequiredTag>
              </FormLabel>
              <select
                {/* 绑定register，对应Yup规则里的select字段 */}
                {...register("select")}
              >
                {/* 给默认选项加空值，触发required校验 */}
                <option value="">请选择...</option>
                <option value="webSolutions">网页解决方案</option>
                <option value="mobileSolutions">移动端解决方案</option>
                <option value="devOps">DevOps解决方案</option>
                <option value="research">研究协助</option>
                <option value="uiux">UI/UX设计</option>
              </select>
            
              <ErrorTag>
                <ErrorMessage errors={errors} name="select" />
              </ErrorTag>
              <FormLabel value="message">
                留言 <RequiredTag>*</RequiredTag>
              </FormLabel>
              <textarea
                {...register("message")}
                placeholder="请告诉我们更多您的需求，比如预算、疑问等"
              />
              <ErrorTag>
                <ErrorMessage errors={errors} name="message" />
              </ErrorTag>
              <FormButton type="submit">提交需求</FormButton>
              <Text>我们会在48小时内回复您😉</Text>
            </Form>
          </FormContent>
        </FormWrap>
      </Container>
    </>
  );
};

export default Contact;

内容的提问来源于stack exchange，提问作者Soloh