React-bootstrap 表单中的自定义验证不起作用

Question

我正在尝试将自定义验证逻辑添加到我的react-bootstrap表单中，但isInvalid似乎没有得到尊重。一旦validated={true}在表单上设置，它总是验证非空字符串，无论isValid或isInvalid。显示无效消息，但该字段显示为绿色。看这里：

这是有问题的代码：

 <Form noValidate validated={formValidated} id="bidForm">
    <Form.Group className="mb-3" controlId="formBasicBidding">
       <Form.Label>Bid Amount</Form.Label>
       <InputGroup hasValidation className="mb-3">
           <InputGroup.Text id="inputGroupPrepend">$</InputGroup.Text>
           <Form.Control
              required
              value={bidAmount}
              isInvalid={!(parseInt(bidAmount) > 0) && formValidated}
              onChange={e => setBidAmount(e.target.value)}
           />
           <InputGroup.Text id="inputGroupAppend">.00</InputGroup.Text>
           <Form.Control.Feedback type="invalid">
               Please select a dollar amount {`>`} 0
           </Form.Control.Feedback>
        </InputGroup>
    </Form.Group>
    <...>
</Form>

我能够pattern=在输入上使用正则表达式使其工作，但我计划在正则表达式不够的情况下进行更复杂的验证。我怎样才能正确地react-bootstrap遵循？谢谢！isValidisInvalid

Answer 1

文档并没有很好地阐明这一点，但表单级validated属性直接挂钩到 HTML5 的本机验证库，并且不能与其他验证技术同时使用。因此，如果您使用本机选项并且输入不违反任何本机验证选项（required、pattern等），则输入将被视为有效。由于除了出价输入之外，您没有任何本机验证属性required，因此就 React-Bootstrap 而言，“foo”是有效的。

（如果您认为“让您同时使用两者是糟糕的代码设计”，我倾向于同意您的观点。）

您会注意到，使用当前的代码，如果您输入“foo”并提交表单，该元素实际上确实应用了一个is-invalid类，但它也应用了:valid伪选择器，因为整个表单都经过了验证，这从CSS的角度来看似乎优先：

这里最好的解决方案是使用本机 HTML5 验证选项（详细信息请参见此处）或自行推出（使用或不使用 Formik 等帮助程序库），但不能同时使用两者。

如果您试图避免验证，直到输入实际上处于“脏”状态（例如用户填写或提交表单），您可以执行以下操作（此处为 CodePen）：

        <Form.Control
          required
          value={bidAmount}
          isInvalid={!(parseInt(bidAmount) > 0) && (bidAmount.length || formSubmitted)}
          onChange={(e) => setBidAmount(e.target.value)}
        />