React-Bootstrap中Form.Control必填项失效问题求助

核心问题原因 #

表单验证失效的核心原因是自定义onClick事件覆盖了按钮的原生提交行为，导致浏览器自带的required验证逻辑未被触发。此外还有两处细节问题需要修正：

具体解决步骤 #

1. 修复表单提交逻辑
   移除按钮上的onClick={handleSubmit}，给<Form>组件添加onSubmit事件，确保原生验证逻辑能被触发：

   <Form action="/api/concerts/add-new" method="post" onSubmit={handleSubmit}>
     {/* 表单内容 */}
     <Modal.Footer>
       <Button variant="dark text-white col-12 mx-auto" type="submit">
         <TbUpload />&nbsp;&nbsp;&nbsp;Upload
       </Button>
     </Modal.Footer>
   </Form>
   

   同时更新handleSubmit函数，先校验表单有效性：

   const handleSubmit = (e) => {
     e.preventDefault();
     const formElement = e.currentTarget;
     // 检查表单是否符合验证规则
     if (formElement.checkValidity()) {
       // 验证通过后执行提交逻辑
       formElement.submit();
     } else {
       // 触发原生验证提示
       formElement.reportValidity();
     }
   };
   

2. 修正重复的controlId
   两个<Form.Group>的controlId重复，会导致组件标识冲突，修改为唯一值：

   <Form.Group className="mb-3" controlId="titleInput">
     {/* Title输入框 */}
   </Form.Group>
   <Form.Group className="mb-3" controlId="youtubeLinkInput">
     {/* YouTube链接输入框 */}
   </Form.Group>
   

3. 修正重复的name属性
   第二个<Form.Control>的name属性与第一个重复，会导致表单提交时数据覆盖，改为对应字段名：

   <Form.Control
     required
     type="text"
     placeholder="paste the YouTube link here"
     name="youTubeSrc"
     value={youTubeSrc}
     onChange={(e) => setYouTubeSrc(e.target.value)}
   />
   

补充说明 #

React-Bootstrap的<Form.Control>的required属性依赖浏览器原生表单验证，必须确保表单提交流程通过原生submit事件触发，不能用自定义点击事件跳过验证逻辑。

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