Пользовательская проверка форм с помощью react-начальной загрузки

#reactjs #forms #validation #react-bootstrap #react-bootstrap-form

Вопрос:

Я пытаюсь понять, как добавить пользовательские сообщения проверки в свою форму

Мой код выглядит так

 lt;Form noValidate validated={ validated } onSubmit={ onSubmit } style={ { 'width': '90%' } }gt;  lt;Form.Group className="mb-3" controlId="company"gt;   lt;Form.Labelgt;Companylt;/Form.Labelgt;   lt;Form.Control type="company"   name="company"   placeholder="Enter company name"   // required   minLength={5}   value={ fields.company }   onChange={ onFieldChange }   /gt;   lt;Form.Control.Feedback type="invalid"gt;   Please enter the company name.   lt;/Form.Control.Feedbackgt;   lt;/Form.Groupgt;  lt;/Formgt;  

Обратите внимание , что я выдаю общее сообщение Please enter the company name , если есть какая-либо ошибка проверки. Но я хочу, чтобы у меня было другое сообщение, если поле пустое, а пользователь вводит что-то, но недостаточно длинное, так как минимальная длина составляет 5.

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

Я читал об setCustomValidity этом, но не могу понять, как вывести сообщение, которое оно хранит. Я попробовал кое-что из того, что нашел в Интернете. В идеале я хочу иметь такую логику, как эта:

 lt;Form.Control.Feedback type="invalid"gt;   if (missing) Please enter the company name.   if (tooshort) Name must be at least 5 characters  lt;/Form.Control.Feedbackgt;   

или, может быть, вот так

 lt;Form.Control.Feedback type="missing"gt;   Please enter the company name.  lt;/Form.Control.Feedbackgt;  lt;Form.Control.Feedback type="tooshort"gt;   Name must be at least 5 characters  lt;/Form.Control.Feedbackgt;   

Как я могу сделать сообщение об ошибке более динамичным?

Комментарии:

1. вы можете написать функцию для этой пользовательской логики и задать соответствующее сообщение

2. Я уже устанавливаю сообщение с помощью setCustomValidity, но не могу понять, как вывести сообщение во время рендеринга.