在 React Bootstrap 表单中停止验证 React Form 组件中的一个字段答案

【问题标题】：Stop validation of one field in React Form component in a React Bootstrap Form在 React Bootstrap 表单中停止验证 React Form 组件中的一个字段
【发布时间】：2021-04-08 10:41:35
【问题描述】：

我有一个反应表单来收集用户的地址。在表格的第一行，我取用户的第一行地址、道路和郊区。由于传递给表单的 'validated' 属性和传递给每个表单控件的 'required' 属性，此表单验证条目，但在 'suburb' 的情况下除外

    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>

当用户在未填写任何字段的情况下点击提交时，将呈现以下内容：

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

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

【问题讨论】：

标签： reactjs bootstrap-4 react-bootstrap html5-validation

【解决方案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;
}

之后，我可以在每个 <Form.Control> 中使用 prevent-validation 类，以防止这种行为。

【讨论】：