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

发布于 2025-01-15 05:39:27 字数 1495 浏览 2 评论 0原文

我正在尝试将自定义验证逻辑添加到我的 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 正确遵循 isValid 和 isInvalid ？谢谢！

原文

I'm trying to add custom validation logic to my react-bootstrap forms, but isInvalid doesn't seem to be respected. As soon as validated={true} is set on the form, it always validates non-empty strings, regardless of isValid or isInvalid. The invalid message is displayed, but the field shows as green. See here:

Here is the offending code:

 <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">lt;/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>

I was able to get it to work using a pattern= regex on the input, but I'm planning to do more complex validation where a regex won't be sufficient. How can I get react-bootstrap to follow isValid and isInvalid properly? Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉城 2025-01-22 05:39:27

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

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

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

这里最好的解决方案是使用本机 HTML5 验证选项（详细信息）或 < a href="https://react-bootstrap.github.io/forms/validation/#form-libraries-and-server-rendered-styles" rel="noreferrer">自己动手（有或没有像 Formik 这样的辅助库），但不能同时。

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

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

The docs don't do a great job of making this clear, but the form-level validated attribute hooks directly into HTML5's native validation library and can't be used simultaneously with other validation techniques. So if you're using the native option and an input doesn't violate any of the native validation options (required, pattern, etc), then the input will be considered valid. Since you don't have any of the native validation attributes besides required on your bid input, "foo" is valid as far as React-Bootstrap is concerned.

(If you're thinking 'well that's bad code design to let you use both simultaneously', I'd tend to agree with you.)

You'll note that with your current code, if you enter "foo" and submit the form the element actually does have an is-invalid class applied to it, but it's also got the :valid psuedo-selector applied to it because the entire form was validated, which seems to take precedence from a CSS perspective:

The best solution here is to use either the native HTML5 validation option (detailed here) or roll your own (with or without a helper library like Formik), but not both simultaneously.

If you're trying to avoid validating until the input is actually in a "dirty" state (e.g. the user filled it out or submitted the form), you can do something like this (CodePen here):

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

回复收藏 0 原文

~没有更多了~