如何防止提交按钮重新加载页面，同时保持默认表单警告？

Question

我有一个简单的表单来获取表的行/列号，并使用按钮type = "submit"重新加载页面onClick。

我想在用户输入无效值时保留警告，因为输入具有所需的最大/最小数量，这在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>

Answer 1

如果我理解你的问题，你想保留默认的html警告。我想建议如下：

1. 首先，您不需要为onClick附加button事件处理程序，因为HTML button中的form或submit类型默认提交到包含它的表单。
2. 您可以将onSubmit事件处理程序附加到主窗体，并在其回调函数中阻止默认行为。
3. 有了这个，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>