React-Bootstrap表单添加必填验证与星号标识求助

核心问题修正与实现方案 #

以下是针对你需求的完整解决方案，包含必填星号标识、表单验证触发逻辑的实现：

完整代码示例 #

import { Form, Button } from 'react-bootstrap';

function VerificationForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    const form = event.currentTarget;
    
    // 触发HTML5表单验证逻辑
    if (!form.checkValidity()) {
      event.stopPropagation();
    }
    // 添加验证状态类，触发React-Bootstrap的验证样式
    form.classList.add('was-validated');
    
    // 验证通过后的提交逻辑，可自行补充
    if (form.checkValidity()) {
      console.log('表单验证通过，可提交数据');
    }
  };

  return (
    <Form noValidate onSubmit={handleSubmit}>
      {/* 第一个表单组：宠物名字 */}
      <Form.Group className="mb-3" controlId="petName">
        <Form.Label>
          <i className="fa fa-question" aria-hidden="true"></i> 
          What's your pet name? 
          <span className="text-danger ms-1">*</span>
        </Form.Label>
        <Form.Control
          type="text"
          placeholder="enter answer"
          required
          autoFocus
        />
        <Form.Control.Feedback type="invalid">
          请填写您的宠物名字
        </Form.Control.Feedback>
      </Form.Group>

      {/* 第二个表单组：最喜欢的运动 */}
      <Form.Group className="mb-3" controlId="favoriteSport">
        <Form.Label>
          <i className="fa fa-question" aria-hidden="true"></i> 
          What's your Favourite sport? 
          <span className="text-danger ms-1">*</span>
        </Form.Label>
        <Form.Control
          type="text"
          required
          placeholder="enter answer"
        />
        <Form.Control.Feedback type="invalid">
          请填写您最喜欢的运动
        </Form.Control.Feedback>
      </Form.Group>

      <Button type="submit">提交表单</Button>
    </Form>
  );
}

export default VerificationForm;

关键修改说明 #

1. 唯一ControlId：将两个表单组的controlId改为petName和favoriteSport，避免重复ID导致的控件关联异常
2. 必填星号标识：在Form.Label中添加<span className="text-danger ms-1">*</span>，利用Bootstrap的text-danger类设置红色星号，ms-1增加与文本的间距
3. 表单验证触发：
   • 给Form添加noValidate属性，禁用浏览器默认验证提示，改用React-Bootstrap的样式
   • 绑定onSubmit事件，通过form.checkValidity()触发HTML5验证逻辑，添加was-validated类触发验证样式
   • 使用Form.Control.Feedback自定义错误提示内容，增强用户体验
4. 移除冲突属性：删除第二个控件的autoFocus，避免两个控件同时争抢焦点的问题

验证效果说明 #

点击提交按钮时会自动触发验证：

• 未填写必填字段时，输入框显示红色边框，下方展示自定义错误提示
• 填写符合要求的内容后，验证通过可执行后续提交逻辑

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