Особенности обработчика отправки формы при использовании addEventListener

Чтобы провести проверку формы перед ее отправкой, нужно повесить обработчик на событие onsubmit для тега форм и вернуть false в случае ошибки. Если делать это прямо в HTML-коде (т.е. <form action="" onsubmit="">) или с помощью свойства onsubmit через JavaScript, то все работает без проблем. Но если попытаться сделать то же самое через addEventListener, то без дополнительных мер форма отправляется в любом случае.

Происходит это потому что после вызова добавленного обработчика происходит вызов обработчика формы по умолчанию, который и отправляет ее на сервер. Чтобы этого избежать, нужно сделать две вещи. Во-первых, добавлять функцию-обработчик с параметром фазы false (обработка на фазе всплывания):


element.addEventListener('submit',prevalidator,false);

Во-вторых, в самом обработчике выставить свойство события event.preventDefault в false, запрещающее вызов обработчика по умолчанию в том случае, если нужно отменить отправку формы. Код выглядит примерно следующим образом:

function prevalidator(event) {


var result=true;


// здесь идет валидация формы, в ходе которой если находим неправильно заполненное поле, сбрасываем result в false


  if (!result) {


    if (evt.preventDefault) evt.preventDefault();

    else evt.returnValue = false;

  }

  return result;

} 

После этого отправка формы будет происходить только в том случае, если переменная result в ходе проверки осталась в true.


0
Цитировать