Я бы не стал этого делать на твоем месте. onsubmit не обозначает то, что вы, возможно, думаете, это действие, которое необходимо предпринять при отправке формы. Он определяет, что делать, когда пользователь нажимает кнопку отправки. Формы, которые отправляются без использования кнопки (важная вещь со вспомогательными технологиями), даже не запускают событие submit! Я видел, как веб-разработчики совершают эту ошибку снова и снова, и я потрясен тем, что никто не удосужился проверить, что это делает.
Правильный способ заставить форму вызывать сценарий в качестве процедуры отправки — и есть *только один* правильный способ сделать это — использовать атрибут action в форме со схемой javascript: (которая, по общему признанию, *не* стандартизирован, хотя это единственный оставшийся способ заставить форму вызывать сценарий в качестве процедуры отправки вместо выполнения HTTP-запроса POST к URL-адресу). В вашем случае это будет <form action="javascript: signUp()"> . Обратите внимание, что signUp не принимает аргумент. Это связано с тем, что event считается исторической функцией и не рекомендуется для использования. Первоначально он был создан Microsoft с Internet Explorer и относится к последнему инициированному событию. Несмотря на проблему с глобальными переменными, вам больше не следует на это полагаться. Отсутствие замены не является проблемой — вам не нужно знать, какое событие используется для отправки вашей формы, возможно — signUp выполнит процесс регистрации. Если вы это сделаете, есть хорошие способы сделать это тоже.
После исправления фрагмента вам больше не понадобятся сбивающие с толку onsubmit="event.preventDefault" или соответствующие значения атрибута onclick="signUp(event)", которые только добавляют шума к прямолинейному и удобочитаемому гипертексту. onclick и другие on обработчики событий могут быть удалены в будущем в попытке четко и четко разделить содержимое и поведение в HTML.
Еще одна проблема с фрагментом — неправильное использование display:none там, где должен использоваться атрибут hidden. Первый просто скрывает элемент, но это презентационный атрибут и не сообщает семантически, что форма изначально «недоступна» — без сомнения, эффект, который вам нужен. Как пользователь, я могу и банально могу отключить таблицу стилей для вашей страницы, включая встроенные стили — это не делает вашу форму изначально релевантной, только из-за этого. Вот для чего нужен атрибут hidden — это *семантический* эквивалент display:none , которым, к сожалению, снова везде злоупотребляют.
