React Hook 表单未显示特定字段的验证错误

Question

我遇到了 React Hook Form 的问题，其中特定字段 (blog_cat) 的验证错误未按预期显示。我已经使用 zod 库设置了表单验证，并且所有其他字段都工作正常。但是，尽管确保正确注册该字段并正确定义验证规则，但当该字段留空时，我没有看到验证错误消息。

const schema = z.object({
        blog: z.string({ required_error: "Please enter a blog content, it cannot be empty!!!" }).min(50, { message: "Blog content should be atleast minimum 50 characters" }),
        title: z.string().min(5, { message: "Title should be atleast minimum 5 characters" }),
        reading_time: z.string({ required_error: "Reading Time required" }),
        featured_image: z
            .any()
            // To not allow empty files
            .refine((files) => files?.length >= 1, { message: 'Image is required.' })
            // To not allow files other than images
            .refine((files) => ACCEPTED_IMAGE_TYPES.includes(files?.[0]?.type), {
                message: '.jpg, .jpeg, .png and .webp files are accepted.',
            })
            // To not allow files larger than 5MB
            .refine((files) => files?.[0]?.size <= MAX_FILE_SIZE, {
                message: `Max file size is 5MB.`,
            }),
        blog_cat: z.string({required_error : "Please select one of blog cateogry"}).min(6, {message :  "Please select one of blog cateogry"} ),
        tags: z.array(z.string()).min(1, { message: "At least one tag is required" }),


    })

<div>
                            <label htmlFor="countries" className="block mb-2 text-sm font-bold text-gray-900">Blog Category</label>
                            <select id="countries"
                                {...register('blog_cat')}
                                value={something.blog_cat}
                                onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setSomething({ ...something, blog_cat: e.target.value })}
                                className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-black dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                <option selected>Choose a Blog Type</option>
                                <option value="Food Blogs">Food Blogs</option>
                                <option value="Technology Blog">Technology Blog</option>
                                <option value="Travel Blogs">Travel Blogs</option>
                                <option value="Personal Blogs/LifeStyle Blog">Personal Blogs/LifeStyle Blog</option>
                                <option value="Business Blog">Business Blog</option>
                            </select>
                            {errors.blog_cat && <p className="text-red-500">{errors?.blog_cat?.message?.toString()}</p>}
                        </div>

 <div>
                            <label className="block mb-2 text-sm font-bold text-gray-900">Tags</label>
                      
                            <ReactTags
                                classNames={{
                                    tags: "flex flex-wrap",
                                    tag: "bg-gray-50 mb-5 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 p-2.5 mb-2 mr-2",
                                    remove: "text-gray-400 ml-2",
                                    suggestions: "bg-white border border-gray-300 rounded-lg shadow-md z-10 absolute",
                                    activeSuggestion: "cursor-pointer bg-gray-100",
                                }}
                                {...register("tags")}
                                tags={something.tags}
                                handleAddition={HandleAddition}
                                handleDelete={HandleDeletion}
                                inputFieldPosition="bottom"
                                autocomplete
                                inputFieldClass="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:border-gray-600 dark:placeholder-gray-400 dark:text-black dark:focus:ring-blue-500 dark:focus:border-blue-500"
                            />
                            {errors.tags && <p className="text-red-500">{errors?.tags?.message}</p>}





                        </div>

更像是下拉选择项目，如果选择了非项目，它应该抛出错误，但不会显示任何错误，对于标签，它只显示“必需”错误而不是自定义错误

Answer 1

 <option value = "">Choose a Blog Type</option>