Shadcn/ui Tooltip包裹按钮触发表单验证的解决方案咨询

核心原因 #

表单内的<button>元素默认type="submit"，哪怕被Tooltip包裹，点击时依然会触发表单的提交事件，进而触发react-hook-form的字段验证。移除Tooltip后问题消失，本质是Tooltip的包裹结构让按钮的默认提交行为被明确触发了，而直接使用按钮时可能没被你留意到。

具体解决方法 #

1. 给Button1明确设置type="button"

这是最直接的解决方案，把按钮从默认的提交按钮改成普通按钮，点击就不会触发表单验证逻辑：

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Button } from '@/components/ui/button';
import { useForm } from 'react-hook-form';

// 表单初始化逻辑
const form = useForm({
  resolver: zodResolver(yourZodSchema),
  defaultValues: {
    jobName: '',
    button: ''
  }
});
const { setValue } = form;

// 包裹Tooltip的按钮组件
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      {/* 重点：添加type="button"属性 */}
      <Button type="button" onClick={() => setValue('button', 'Button 1')}>
        Button 1
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Tooltip提示内容</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

2. 配合设置react-hook-form的验证模式（双重保障）

在初始化useForm时，将mode设置为onSubmit，确保只有点击带有type="submit"的提交按钮时，才会触发全字段验证：

const form = useForm<YourFormDataType>({
  resolver: zodResolver(yourZodSchema),
  mode: 'onSubmit', // 仅在提交时触发验证
  defaultValues: {
    jobName: '',
    button: ''
  }
});

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