I want to submit a form through a button which is outside the form and do the validation to that form. I'm using the Form tag from react-bootstrap.

My code doesn't validate the form

<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 });
}

I want to submit a form through a button which is outside the form and do the validation to that form. I'm using the Form tag from react-bootstrap.

My code doesn't validate the form

<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 });
}

• javascript
• reactjs
• jsx
• react-bootstrap

• 1 The HTML5 placeholder attribute is not a substitute for the label element – Quentin Commented May 7, 2019 at 14:55
• 2 Consider refactoring. I can't think of a reason for your button to not be inside your form tag. Even if position of the elements are an issue...that's what css is for. – Elroy Jetson Commented May 7, 2019 at 14:55
• @ElroyJetson actually i want to make a form then a form then a button save for the whole page , this button must validate the first form only! – isso kd Commented May 7, 2019 at 15:12

1 Answer 1

Ideally: Don't do that. Form elements are a useful structural element.

Failing that. Add a form attribute to the button with the value equal to the id attribute of the form.

form HTML5

The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a <form> element in the same document. If this attribute is not specified, the <button> element will be associated to an ancestor <form> element, if one exists. This attribute enables you to associate <button> elements to <form> elements anywhere within a document, not just as descendants of <form> elements.

— MDN