如何通过表单外的按钮提交表单？

Posted 2023-02-22

【中文标题】如何通过表单外的按钮提交表单？

【英文标题】：How to submit a form through a button outside the form?

【发布时间】：2019-09-25 06:37:23

【问题描述】：

我想通过表单外部的按钮提交表单并对该表单进行验证。我正在使用 react-bootstrap 中的 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 );

【问题讨论】：

The html5 placeholder attribute is not a substitute for the label element

考虑重构。我想不出你的按钮不在你的表单标签内的原因。即使元素的位置是一个问题......这就是 css 的用途。

@ElroyJetson 实际上我想制作一个表单，然后是一个表单，然后是一个按钮保存整个页面，这个按钮必须只验证第一个表单！

【参考方案1】：

理想情况下：不要那样做。表单元素是一种有用的结构元素。

失败了。为按钮添加一个form 属性，其值等于表单的id 属性。

表单 HTML5

按钮关联的表单元素（其表单所有者）。属性的值必须是 a 的 id 属性 <form> 同一文档中的元素。如果没有这个属性 指定时，<button> 元素将与祖先相关联 <form> 元素，如果存在的话。该属性使您能够 将 <button> 元素与 <form> 元素关联 文档，而不仅仅是 <form> 元素的后代。

——MDN