Блог

У меня есть форма react для сбора адреса пользователя. В первой строке формы я беру у пользователей первую строку адреса, дороги и пригорода. Эта форма проверяет запись благодаря «проверенному» реквизиту, переданному в форму, и «обязательному» реквизиту, переданному в каждый элемент управления формы, за исключением случая «пригорода»

     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>
 

Когда пользователь нажимает кнопку отправить, не заполнив ни одно из полей, отображается следующее:

Проблема в том, что я вообще не хочу проверять suburb, это выглядит немного глупо, если оно выделено зеленым цветом, когда оно пустое. Есть ли какая-то поддержка, которую я могу передать группе форм suburb, чтобы вообще не проверять ее, когда пользователь нажимает submit? Он вообще не должен показывать никаких отзывов, ни красных, ни зеленых.

Альтернативой было бы разделить форму на несколько форм, при этом некоторые поля должны быть в проверенной форме, а некоторые поля — в неподтвержденной форме, но я чувствую, что должен быть лучший способ.

Недавно я наткнулся на ту же проблему, и единственное исправление, о котором я мог подумать, было своего рода «принуждением» элемента не показывать обратную связь о проверке.

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 class в каждом <Form.Control> , который вы хотите, чтобы предотвратить такое поведение.