如何防止提交按钮重新加载页面，同时保留默认的表单警告？
如何防止提交按钮重新加载页面，同时保留默认的表单警告？
提问于 2019-02-12 02:01:26
我有一个简单的表单来获取表格的行/列号，其中包含一个重新加载页面onClick的按钮type = "submit"。
我希望在用户输入无效值时保留警告，因为输入具有所需的最大/最小值，这对于onClick方法末尾的return false;或event.preventDefault();是不可能的
你知道怎么做吗？
以下代码是用JSX编写的：
<form id="table_form">
<label>how many rows ?</label>
<input
type="number"
name="rows"
min={min_tablerows}
max={max_tablerows}
required
value={tablerows}
onChange={onChangeHandeler} />
<label>how many columns ?</label>
<input
type="number"
name="columns"
min={min_tablecolumns}
required
value={tablecolumns}
onChange={onChangeHandeler} />
<button
type="submit"
form="table_form"
onClick={onClickHandeler}>
<FontAwesomeIcon icon={faCheck} />
</button>
</form>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-12 02:28:14
如果我很好地理解您的问题，您希望保留默认的html警告。我有以下几点建议：
- 首先，您不需要为
button附加onClick事件处理程序，因为默认情况下，HTMLform中或类型为submit的button会提交给它所包含的表单。如果您可以将behaviour. - With事件处理程序附加到主窗体，并且在其回调函数中阻止默认的
- ，html5将处理任何错误并阻止窗体从一开始就被提交。如果没有发现任何错误，它将运行附加到窗体的事件处理程序的回调函数。
因此您的代码可能如下所示：
handleSubmit(e) {
e.preventDefault();
// Do what you like here
e.target.submit(); // if you want to submit the forms
}
<form id="table_form" onSubmit={this.handleSumbit.bind(this)}>
<label>how many rows ?</label>
<input
type="number"
name="rows"
min={min_tablerows}
max={max_tablerows}
required
value={tablerows}
onChange={onChangeHandeler} />
<label>how many columns ?</label>
<input
type="number"
name="columns"
min={min_tablecolumns}
required
value={tablecolumns}
onChange={onChangeHandeler} />
<button
type="submit">
<FontAwesomeIcon icon={faCheck} />
</button>
</form>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54636500
复制相关文章
相似问题