Отключение отправки формы Enter'ом: решение для PHP, jQuery

Быстрый ответ

Чтобы немедленно отключить автоотправку формы при нажатии Enter, можно воспользоваться инструментом JavaScript — библиотекой jQuery. Здесь представлен эффективный код, который отслеживает событие нажатия клавиши (keypress), проверяет, была ли нажата Enter (код 13), и активирует функцию preventDefault(), блокирующую отправку формы:

$('form').on('keypress', 'input', function(event) {
    if (event.which == 13) event.preventDefault(); // Не так быстро, форма ещё не готова к отправке!
});

Этот код применяется к форме и обеспечивает, что ни одно из полей ввода не запустит отправку при нажатии клавиши Enter.

Продвинутые методы работы с формами

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

Усовершенствование процесса валидации данных

Надёжная валидация данных перед отправкой формы – неотъемлемый элемент любой работы с формами. Путём встраивания функции валидации (validationFunction) в обработчик событий можно гарантировать комплексную проверку введённых данных:

$('form').on('keypress', 'input', function(event) {
    if (event.which == 13) {
        event.preventDefault();
        if (validationFunction(this, event)) {
            // Форма проверена и готова к отправке, подобно готовой к выпечке пицце.
        }
    }
});

function validationFunction(input, event) {
    // Ваши правила валидации здесь, точно такие же строгие, как дресс-код в элитном клубе.
}

Метод .each() jQuery позволяет стандартизировать проверку полей формы и настроить управление фокусом для улучшения доступности.

Подробнее об этом расскажет наш спикер на видео

Точное определение нажатой клавиши

Метод keyCode, хотя и устаревший, но всё равно эффективен для определения нажатой клавиши. Если говорить о более современных методах, то сегодня для этой цели лучше использовать event.key:

$('form').on('keypress', 'input', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault();
        // Здесь можно вставить функцию валидации, если это необходимо
    }
});

Более эффективный метод отправки

Ещё одно невероятно полезное решение – напрямую слушать события отправки формы:

$('form').on('submit', function(event) {
    if (event.originalEvent && event.originalEvent.explicitOriginalTarget) {
        if (event.originalEvent.explicitOriginalTarget.type === 'submit') {
            return true; // Отправка произведена посредством кнопки "Отправить", можно разрешить процесс.
        }
    }
    event.preventDefault(); // Отодвинем отправку формы на потом.
});

Резервная стратегия на случай отключения JavaScript

Не забывайте о доступности! Если в браузере пользователя отключен JavaScript, подумайте над добавлением невидимой кнопки отправки в верхней части формы:

<form onsubmit="return false;">
    <button type="submit" disabled style="display: none;"></button>
    <!-- Здесь остальной код вашей формы -->
</form>

Визуализация

Можно представить клавишу Enter, не как кнопку "Отправить", а как сигнал для прекращения отправки формы:

Было:   [🔤, 🔢, ⏎ (Отправить форму)]
Стало: [🔤, 🔢, ⛔ (Прекращение отправки формы)]

Представьте это как работу личного помощника, защищающего вашу форму:

В эти ворота "Enter" не впустит: [⛔]
// Помощник (⛔) решительно блокирует дорогу клавише Enter, рвущейся отправить форму.

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

Создание оптимального пользовательского опыта

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

Textarea – особый случай

В большинстве случаев элемент Textarea должен реагировать на нажатие Enter. Для этого мы можем сделать некоторые настройки:

$(document).on('keydown', ':input:not(textarea)', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault();
    }
});

Постоянство – залог успеха

Используя $(document) вместо $(window), мы обеспечиваем более согласованное поведение в различных браузерах:

$(document).on('keydown', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault(); // Enter, мы тебя здесь не ждали!
    }
});

Использование JavaScript напрямую: в крайнем случае

Мы все ценим порядок в коде, но иногда нужны крайние меры. В качестве последнего средства можно вставить onsubmit="return false;" непосредственно в тег <form> вашей формы:

<form onsubmit="return false;">
    <!-- Здесь элементы формы -->
</form>

Полезные материалы

1. Prevent users from submitting a form by hitting Enter – Stack Overflow — Референс от сообщества Stack Overflow о том, как предотвратить отправку формы по нажатию клавиши Enter.
2. The Form element – HTML: HyperText Markup Language | MDN — Обширные сведения на MDN о HTML-элементах <form>.
3. Event: preventDefault() method – Web APIs | MDN — Детальная документация MDN о функции .preventDefault().
4. HTML onsubmit Event Attribute — Практическое пособие по использованию атрибута onsubmit.
5. Content security policy | Articles | web.dev — Рекомендации по безопасному использованию встроенных обработчиков событий.
6. HTML Standard — Обширная спецификация HTML5, покрывающая все аспекты веб-форм.
7. HTML DOM Document addEventListener() Method — Руководство по использованию функции addEventListener().
8. keypress event | jQuery API Documentation — Подробное описание использования метода jQuery .keypress().