Блог

Главная - Вопросы по программированию - react-bootstrap: проверка не работает со второй формой

react-bootstrap: проверка не работает со второй формой

#reactjs #validation #react-bootstrap

#reactjs #проверка #react-bootstrap

Вопрос:

У меня есть два компонента, каждый из которых отображает форму, отформатированную и проверенную react-bootstrap. Код проверки и макет первой формы работают идеально, но не со второй. Форма не выдает никаких отзывов, независимо от моего случая проверки…

Я делаю что-то не так?

Вот вторая форма :

 <Form noValidate validated={this.state.validated} onSubmit={this.handleSubmit}>
    <Form.Group controlId="testForm">
       <Form.Control placeholder="test" required/>
       <Form.Control.Feedback type="invalid">
         Please provide a value.
       </Form.Control.Feedback>
    </Form.Group>
 <input className="col mt-4 btn btn-primary" type="submit" value="Envoyer" />
</Form>

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

1. noValidate атрибут означает, что он не будет проверять вашу форму…

2. noValidate предназначен для отмены пользовательского интерфейса проверки браузера по умолчанию. react-bootstrap.github.io/components/forms/?#forms-validation . Я не должен получать помощь? 🙂

Ответ №1:

Проблема заключалась в методе handleSubmit(). Раньше у меня было это :

 handleSubmit(event){
    if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
    }else{
    this.setState({validated:true});
    event.preventDefault(); 
   }
}

вместо этого :

 handleSubmit(event){
    if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
    }else{
   ...
   }
    this.setState({validated:true});
    event.preventDefault();
}

Мне также пришлось создать один файл для каждой формы…

Надеюсь, это кому-нибудь поможет.