Остановить отправку формы с помощью eventlistener

Question

Я пытаюсь помешать отправке формы, используя eventlistener submit.Моя анонимная функция выполняется, но форма все еще отправляет, даже с возвращением false в конце функции.Нет ошибок JS.

Я делаю какую-то глупую ошибку?

<form id="highlight">
    Row: <input type="text" name="rows" value="1" id="rows">
    Column: <input type="text" name="cells" value="1" id="cells">
    <input type="submit" name="Submit" value="Highlight" id="Submit">
</form>

<script>
var highlight_form = document.getElementById('highlight');
highlight_form.addEventListener('submit', function() {
        alert('hi');
    return false;
}, false);
</script>

Answer 1

Я всегда вызываю event.preventDefault() для прослушивателей событий, для которых я хочу отменить событие, а также возвращаю false.Это всегда работает для меня.

<script>
var highlight_form = document.getElementById('highlight');

highlight_form.addEventListener('submit', function(event)
{
    event.preventDefault();
    alert('hi');
    return false;

}, false);
</script>

Answer 2

Чтобы предотвратить отправку формы, я всегда использовал событие «onclick» для вызова метода javascript, который будет что-то делать, а затем отправлять оттуда. Вы также можете настроить форму следующим образом:

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

После отправки метод validateForm () может предотвратить отправку при необходимости:

function validateForm()
{
var x=document.forms["myForm"]["fname"].value
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

Answer 3

Ну, я бы так и сделал:

function validate (form)
{
    // return false if some fields are not right
}

function setup_form_validation (form)
{
    form.addEventListener (
        'submit',
        function (f) { // closure to pass the form to event handler
            return function (evt) {
                if (!validate (f)) evt.preventDefault();
                // Return status doesn't work consistently across browsers,
                // and since the default submit event will not be called in case
                // of validation failure, what we return does not matter anyway.
                // Better return true or nothing in case you want to chain other
                // handlers to the submit event (why you would want do that is
                // another question)
            };
        } (form),
    false);
}

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

И, конечно, это не удастся в IE8 и других старых браузерах.Вам понадобится еще один слой абстракции кровавых событий, чтобы он работал везде.