Как предотвратить отправку формы?

Question

У меня есть форма, в которой где-то есть кнопка отправки.

Однако я бы хотел как-то "перехватить" событие отправки и предотвратить его возникновение.

Есть ли какие-нибудькак я могу это сделать?

Я не могу изменить кнопку отправки, поскольку она является частью пользовательского элемента управления.

Answer 1

В отличие от других ответов, возврат false составляет всего часть ответа.Рассмотрим сценарий, в котором ошибка JS возникает до оператора return ...

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

script

function mySubmitFunction()
{
  someBug()
  return false;
}

возвращение false здесь не будет выполнено, и форма будет отправлена ​​в любом случае.Вам также следует вызвать preventDefault, чтобы предотвратить действие формы по умолчанию для отправки форм Ajax.

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

В этом случае, даже с ошибкой, форма не будет отправлена!

В качестве альтернативыможно использовать блок try...catch.

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

Answer 2

Вы можете использовать встроенное событие onsubmit вот так

<form onsubmit="alert('stop submit'); return false;" >

Или

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

Демо

Теперь, это может быть не очень хорошая идея при создании больших проектов. Возможно, вам придется использовать прослушиватели событий.

Пожалуйста, узнайте больше о Встроенные события против прослушивателей событий (addEventListener и IE attachEvent) здесь . Ибо я не могу объяснить это больше, чем Крис Бейкер сделал.

Оба верны, но ни один из них не является "лучшим" сам по себе, и может быть причина, по которой разработчик решил использовать оба подхода.

Answer 3

Присоедините прослушиватель событий к форме, используя .addEventListener(), а затем вызовите метод .preventDefault() для event:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

<form>
  <button type="submit">Submit</button>
</form>

Я думаю, что это лучшее решение, чем определение обработчика событий submit, встроенного в атрибут onsubmit, поскольку он разделяет логику и структуру веб-страницы. Гораздо проще поддерживать проект, в котором логика отделена от HTML. См .: Ненавязчивый JavaScript .

Использование свойства .onsubmit объекта form DOM не является хорошей идеей, поскольку не позволяет подключать несколько обратных вызовов submit к одному элементу. Смотрите addEventListener vs onclick .

Answer 4

Попробуйте это ...

HTML-код

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

jQuery Code

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

или

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});

Answer 5

На данный момент работает следующее (протестировано в chrome и firefox):

<form onsubmit="event.preventDefault(); return validateMyForm();">

, где validateMyForm () - это функция, которая возвращает false в случае сбоя проверки.Ключевым моментом является использование имени event.Мы не можем использовать, например, e.preventDefault()

Answer 6

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

Answer 7

Для предотвращения отправки формы вам нужно только сделать это.

<form onsubmit="event.preventDefault()">
    .....
</form>

Использование вышеуказанного кода предотвратит отправку вашей формы.

Answer 8

Вот мой ответ:

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>

Я добавляю event.preventDefault(); на onsubmit и все работает.

Answer 9

Чтобы следовать ненавязчивым правилам программирования JavaScript и в зависимости от того, как быстро будет загружаться DOM , может быть полезно использовать следующее:

<form onsubmit="return false;"></form>

Затем подключите события, используя onload или DOM ready, если вы используете библиотеку.

$(function() {
    var $form = $('#my-form');
    $form.removeAttr('onsubmit');
    $form.submit(function(ev) {
        // quick validation example...
        $form.children('input[type="text"]').each(function(){
            if($(this).val().length == 0) {
                alert('You are missing a field');
                ev.preventDefault();
            }
        });
    });
});

label {
    display: block;
}

#my-form > input[type="text"] {
    background: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>

Кроме того, я бы всегда использовал атрибут action, так как у некоторых людей может быть запущен какой-нибудь плагин, такой как NoScript , который затем нарушит валидацию. Если вы используете атрибут действия, по крайней мере, ваш пользователь будет перенаправлен сервером на основе проверки бэкэнда. Если вы используете что-то вроде window.location, с другой стороны, все будет плохо.