Как отправить форму через кнопку за пределами формы? - PullRequest
Новая
       33

Как отправить форму через кнопку за пределами формы?

0 голосов
/ 07 мая 2019

Я хочу отправить форму с помощью кнопки, которая находится за пределами формы, и выполнить проверку этой формы.Я использую тэг Form из response-bootstrap.

Мой код не проверяет форму 

<Form
    noValidate
    validated={validated}
    onSubmit={e=> this.handleSubmit(e)}>

    <Form.Control
        required
        placeholder="Product Name"
        onChange={e => this.setState({name: e.target.value })}
        pattern={"[A-Z a-z]{3,30}"}
    />
</Form>
<button type="button" value="send" onClick={(e) => this.handleSubmit(e)} className={"btn btn-primary"}>Save</button>

handleSubmit(event) {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
    }
    else
        this.AddProduct();

    this.setState({ validated: true });
}

1 Ответ

2 голосов
/ 07 мая 2019

В идеале: не делай этого.Элементы формы - это полезный структурный элемент.

В противном случае.Добавьте к кнопке атрибут form со значением, равным атрибуту id формы.

form HTML5

Элемент формы, которыйкнопка связана с (ее владельцем формы).Значением атрибута должен быть атрибут id элемента <form> в том же документе.Если этот атрибут не указан, элемент <button> будет связан с элементом <form> предка, если таковой существует.Этот атрибут позволяет связывать <button> элементы с <form> элементами в любом месте документа, а не только с потомками <form> элементов.

- MDN

...