停止验证 React Bootstrap Form 中的 React Form 组件中的一个字段

Question

我有一个反应表单来收集用户的地址。在表格的第一行，我获取用户的第一行地址、道路和郊区。该表单验证了条目，这要归功于传递到表单中的“validated”属性，以及传递到每个表单控件中的“required”属性，“郊区”的情况除外

    return (
        <Form noValidate validated={props.isValidated} onSubmit={props.onSubmit}>
            <Form.Row>
                <Form.Group as={Col} md="4" controlId="validationCustom01">
                    <Form.Label>Address line 1</Form.Label>
                    <Form.Control
                        required
                        type="text"
                        onChange={(e) => {
                            setAddressLineOne(e.target.value);
                        }}
                    />
                    <Form.Control.Feedback></Form.Control.Feedback>
                </Form.Group>
                <Form.Group as={Col} md="4" controlId="validationCustom02">
                    <Form.Label>Road</Form.Label>
                    <Form.Control
                        required
                        type="text"
                        defaultValue={road}
                        onChange={(e) => {
                            setRoad(e.target.value);
                        }}
                    />
                    <Form.Control.Feedback></Form.Control.Feedback>
                </Form.Group>
                <Form.Group as={Col} md="4" controlId="validationCustom03">
                    <Form.Label>Suburb</Form.Label>
                    <Form.Control
                        type="text"
                        defaultValue={suburb}
                        onChange={(e) => {
                            setSuburb(e.target.value);
                        }}
                    />
                </Form.Group>

当用户点击提交而不填写任何字段时，将呈现以下内容：

问题是，我根本不想验证郊区，当它是空的时以绿色突出显示看起来有点傻。当用户点击提交时，是否有一些道具可以传递给郊区表单组以阻止其被验证？它根本不应该显示任何反馈，无论是红色还是绿色。

另一种方法是将表单拆分为多个表单，其中一些字段处于经过验证的表单中，某些字段处于未经验证的表单中，但我觉得应该有更好的方法。

Answer 1

最近我偶然发现了同样的问题，我能想到的唯一解决办法是“强制”元素不显示验证反馈。

我使用的CSS是：

.was-validated .prevent-validation.form-control:valid,
.prevent-validation.form-control.is-valid {
  padding: 0.375rem 0.75rem;
  border-color: #ced4da;
  background-image: none;
}

之后，我可以在您想要防止这种行为的每个

prevent-validation

中使用

<Form.Control>

类。

Answer 2

从表单级别删除

validated={props.isValidated}

，然后在要验证的两个

isInvalid={props.isValidated}

上设置

Form.Control

。

查看更多信息https://github.com/react-bootstrap/react-bootstrap/issues/5190#issuecomment-793662778