Предотвращение заданного действия c по умолчанию - PullRequest
Новая
       36

Предотвращение заданного действия c по умолчанию

0 голосов
/ 16 марта 2020

Я пытаюсь создать простое веб-приложение. Приложение имеет простой интерфейс Html: 

<form>
  <label for="number">You are welcome to enter a Number:</label>
  <input type="number" id="number" min="1" max="20">

  <button>Submit</button>
</form>

К Html прикреплен скрипт, который запускается при каждом нажатии кнопки. Чтобы предотвратить отправку формы и перезагрузку страницы, я использовал preventDefault(). Это довольно хорошо предотвращает это, но также предотвращает появление свойств min и max.

Мой квест: есть ли возможность предотвратить только одно (или несколько) действий по умолчанию для события?

Ответы [ 2 ]

1 голос
/ 16 марта 2020

События в браузере имеют тенденцию образовывать «цепочки». Т.е. кнопка вызывает событие «щелчка», и браузер реагирует на это, выполняя проверку, которая вызывает свои собственные события в зависимости от результата, что может заставить браузер выполнить действие отправки, которое снова вызывает собственное событие.

Я полагаю, что вы сделали, добавили прослушиватель событий к самой кнопке и предотвратили событие «щелчка», которое вызвало бы проверку формы. Как побочный эффект, вы также запретили отправку формы.

Другими словами, вы только «предотвратили» одно событие - но так как они происходят в цепочке, вы нарушили остальную часть chain.

Для меня это звучит так, как будто вы хотите сохранить встроенное в браузер поведение проверки формы (т. е. ту часть, которая реализует ваши свойства min и max), но не позволяет встроенному браузеру -в функциональности "submit" (т. е. той части, которая вызывает перезагрузку страницы).

Вместо этого вы хотите добавить прослушиватель события в событие submit "формы" . Это происходит после проверки, и вы можете «предотвратить» событие, чтобы браузер не go выполнял обычное действие отправки. Таким образом, браузер все еще выполняет проверку формы, и ваш код запускается только в том случае, если проверка прошла успешно. 

function onSubmit(event)
{
  event.preventDefault();
  console.log('submit event prevented');
  // do other stuff here
  // this code only runs if form validation passed successfully
}

document.getElementById('form').addEventListener('submit', onSubmit);
<form id="form">
  <label for="number">You are welcome to enter a Number:</label>
  <input type="number" id="number" min="1" max="20">

  <button>Submit</button>
</form>
0 голосов
/ 16 марта 2020

Вот то, что нужно для веры:

См. Код здесь 

var submitButton = document.querySelector('button');
submitButton.onclick = function(e) {
  e.preventDefault();
  let data = document.querySelector('#number');

  let min = parseInt(data.getAttribute('min'));
  let max = parseInt(data.getAttribute('max'));
  let number = parseInt(data.value) || false;
  if (number > min &&  number < max) {
    alert("validation passed");
  }
}
...