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

Некоторое время назад мне понадобилось что-то очень похожее, и я это получил.

Я делаю это так: у меня есть форма, которую можно отправлять с помощью JavaScript без всякой проверки, и проверка выполняется только в том случае, если пользователь нажимает на кнопку (обычно кнопку отправки).

Для примера я использую минимальную форму, состоящую всего из двух полей и кнопки отправки.

Важно помнить: Форма должна иметь возможность отправляться без проверок из JavaScript. Но если пользователь нажимает кнопку, тогда должна выполняться проверка и форма отправляется только в случае успешного прохождения валидации.

Всё начинается примерно так (я убрал всё лишнее):

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

Обратите внимание, что тег формы не содержит onsubmit="..." (это условие, которое следует соблюдать).

Проблема в том, что форма всегда отправляется, независимо от того, возвращает ли onclick значение true или false.

Если я изменю type="submit" на type="button", это кажется работающим, но на самом деле не срабатывает. Форма никогда не отправляется, но это можно легко исправить.

В конечном итоге я использовал это:

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

А в функции Validator, где return true;, я добавляю строку для отправки формы, что-то вроде этого:

function Validator() {
   // ...бла бла бла... проверки
   if (...) {
      document.getElementById('theFormID').submit();
      return true;
   } else {
      return false;
   }
}

id="" нужен только для вызова getElementById в JavaScript, а name="" нужен только для того, чтобы данные отображались в POST запросе.

Таким образом, всё работает, как мне и нужно.

Я пишу это для тех, кому не нужна функция onsubmit на форме, но необходимо сделать проверку при нажатии кнопки пользователем.

Почему мне не нужна обработка onsubmit в теге формы? Просто: в других частях JavaScript мне нужно выполнить отправку формы, но я не хочу, чтобы выполнялась проверка.

Причина: если пользователь сам выполняет отправку формы, я хочу, чтобы была проведена проверка; но если отправка идет через JavaScript, иногда я хочу выполнить отправку, а проверки этому мешают.

Это может показаться странным, но не тогда, когда, например, дело касается входа в систему... с некоторыми ограничениями... такими как невозможность использования сессий PHP и отключением кукисов!

Поэтому любые ссылки должны быть преобразованы в отправку формы, чтобы данные для входа не были потеряны. Когда вход еще не выполнен, это также должно работать. Поэтому проверки не должны выполняться для ссылок. Но я хочу сообщать пользователю, если он не ввел оба поля: пользователя и пароль. Если какое-то поле пустое, форма не должна отправляться! Вот в чем проблема.

Проблема: форма не должна отправляться, когда одно из полей пустое, только если пользователь нажал кнопку. Если это код JavaScript, то форма должна иметь возможность отправиться.

Если я реализую проверку в onsubmit тега формы, мне нужно будет определить, является ли это пользовательским взаимодействием или вызовом из другого JavaScript. Так как параметры передать невозможно, это становится затруднительным, и некоторые разработчики добавляют переменную, чтобы указать, нужна ли проверка или нет. Первое, что делает функция проверки — проверяет значение этой переменной и т.д. Слишком сложно, и код не отражает того, что на самом деле хотели сделать.

Таким образом, решением будет отсутствие onsubmit в теге формы. Вместо этого обработку нужно делать там, где это действительно нужно — на кнопке.

С другой стороны, зачем помещать код проверки в onsubmit, если концептуально я не хочу валидации в этом месте? Я действительно хочу, чтобы валидация происходила при нажатии кнопки.

Код не только более понятен, но и там, где это необходимо. Просто запомните это:

• Я не хочу, чтобы JavaScript проверял форму (это должно всегда обрабатываться PHP на стороне сервера)
• Я хочу показывать пользователю сообщение, что все поля должны быть заполнены, а это требует JavaScript (на клиентской стороне).

Так почему некоторые люди (думают или говорят мне), что это должно быть сделано в onsubmit? Нет, концептуально я не выполняю проверку на клиенте в onsubmit. Я просто выполняю действие при нажатии кнопки, так зачем не оставить это на реализацию?

Такой код и стиль прекрасно решает задачу. В любом JavaScript, где мне нужно отправить форму, я просто пишу:

document.getElementById('theFormID').action='./GoToThisPage.php'; // Куда идти
document.getElementById('theFormID').submit(); // Отправить данные POST и перейти туда

Это пропускает проверку, когда она не нужна. Форма просто отправляется и загружает другую страницу и т.д.

Но если пользователь нажимает на кнопку отправки (т.е. type="button", а не type="submit"), то проверка выполняется перед тем, как разрешить отправку формы, и если форма не действительна, она не отправляется.

Надеюсь, это поможет другим избежать длинного и сложного кода. Просто не используйте onsubmit, если это не нужно, и используйте onclick. Но не забудьте изменить type="submit" на type="button" и обязательно вызовите submit() с помощью JavaScript.

Вы можете просто получить ссылку на ваши кнопки с помощью jQuery и предотвратить их распространение следующим образом:

$(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {
        e.preventDefault(); // предотвращаем действие по умолчанию
        e.stopPropagation(); // останавливаем распространение события по DOM
        e.stopImmediatePropagation(); // предотвращаем выполнение остальных обработчиков этого события

        return false; // дополнительная мера для предотвращения действия
    });
});

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

В приведённом вами коде jQuery:

$("form").submit(function () { return false; });

данная функция предотвращает отправку формы, возвращая false при событии submit. Это значит, что при нажатии на кнопку отправки форма не будет отправлена.

В качестве альтернативы, вы можете изменить тип кнопки с "submit" на "button", используя следующий HTML-код:

<input type="button"/>

Это также предотвратит отправку формы, но важно помнить, что этот подход сработает только в том случае, если эта кнопка не является единственной кнопкой в форме. Если у вас есть только одна кнопка в форме, изменение типа на "button" будет неэффективным, так как без кнопки типа "submit" форма не сможет быть отправлена.

Если у вас есть HTML-форма с id="form_id", то чтобы предотвратить ее отправку при сабмите, вы можете использовать следующий код на jQuery:

<form id="form_id">
  <!-- ваш HTML код -->
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $("#form_id").submit(function() {
    return false; // предотвращаем отправку формы
  });
</script>

Это будет работать так: когда пользователь попытается отправить форму, функция submit сработает и вернет false, что остановит стандартное поведение браузера по отправке формы.

Кнопки, такие как <button>Click to do something</button>, по умолчанию являются кнопками отправки формы. Чтобы уточнить тип кнопки, необходимо добавить атрибут type. Например, если вы хотите, чтобы кнопка не отправляла форму, используйте type="button". Если вы хотите, чтобы она действовала как кнопка отправки, используйте type="submit". Вот пример:

<button type="button">Click to do something</button>
<button type="submit">Submit</button>

Таким образом, указание атрибута type важно для определения поведения кнопки в контексте формы.