Почему "Показать пароль" отправляет форму
У кнопки "Показать пароль" может оказаться второе действие: запуск отправки формы. В учебном примере ниже причина скрыта в разметке. Такая ошибка помогает объяснить и странное поведение Enter, когда на странице несколько кнопок.
Представим обычную форму входа. После полей в ней стоят две кнопки:
<button>Показать пароль</button> <button type="submit">Войти</button>
У первой пропущен type. В этом фрагменте браузер считает её кнопкой отправки, хотя надпись обещает переключение видимости пароля. Обработчик click может показать пароль, а штатное действие кнопки всё ещё запустит попытку отправки. Проверка полей или обработчик события способны её остановить, поэтому ошибка не всегда заканчивается переходом на другую страницу.
Укажите назначение явно
Для вспомогательной кнопки в этом примере подойдёт type="button". У кнопки входа оставьте type="submit":
<button type="button">Показать пароль</button> <button type="submit">Войти</button>
Первая строка убирает встроенную отправку у этой кнопки. Само переключение видимости пароля по-прежнему нужно реализовать отдельно. Это учебный фрагмент, полный код формы и её обработчиков здесь не показан.
Почему стоит проверить Enter
Стандарт HTML описывает неявную отправку формы. Когда браузер поддерживает её для текущего способа ввода, например Enter в текстовом поле, он активирует кнопку отправки по умолчанию. Ею служит первая submit-кнопка этой формы в порядке DOM. Её визуальное положение может быть другим.
В исходном примере кандидатом становится "Показать пароль". Поэтому проверка одной мышью легко оставляет часть сценария незамеченной. Доступность кнопки, валидация и обработчики событий тоже влияют на результат; утверждать, что Enter всегда отправляет любую форму, нельзя.
Как найти виновную кнопку
Если в приложении отправку обрабатывает JavaScript, полезно смотреть событие submit самой формы. При отправке через кнопку его свойство submitter указывает на неё. В других сценариях значение может быть null. Это помогает сопоставить событие с конкретным элементом.
Рекомендую проверять форму с заполненными и пустыми обязательными полями, отдельно нажимать Enter и проходить вспомогательные кнопки с клавиатуры. Проверьте и итоговый HTML компонентов: нужный type должен попасть в настоящий элемент button.
Основа разбора: стандарт HTML WHATWG и справочник MDN Web Docs.
Какая вспомогательная кнопка в форме чаще всего доставляла вам неожиданные хлопоты?
