#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, но не могу понять, как вывести сообщение во время рендеринга.