Как предотвратить перезагрузку страницы кнопкой «Отправить» при сохранении предупреждений по умолчанию?

Question

У меня есть простая форма для получения номеров строк / столбцов таблицы, с кнопкой type = "submit", которая перезагружает страницу onClick.

Я хочу сохранить предупреждения, когда пользователь вводит недопустимое значение, так каквходы имеют максимальное / минимальное требуемое число, что невозможно при return false; в конце метода onClick или 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, поскольку button в HTML 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>