Отключение кнопки отправки до тех пор, пока пользователь не заполнит форму

Вы должны показать кнопку отправки в разрешенном состоянии, если вы не сможете легко объяснить рядом с ней, что бы включить ее, например, Alert , говорящий« Вы можете отправить форму после заполнения поля1, field2 и т. д. ». Это объяснение должно быть непосредственно рядом с кнопкой и очевидным.

Вы не должны полагаться только на состояние кнопки отправки, чтобы сообщить пользователю, выполняются ли они с нужным материалом или нет. Во-первых, вы можете помочь пользователям автофокусироваться в первом обязательном поле, а затем предоставлять сообщения об успешности /ошибках, когда пользователь проходит через форму (см. Состояние контроля формы в примере загрузки).

Одна идея, которую я еще не видел, реализован, но может работать для вас в зависимости от вашего приложения, заключается в том, чтобы предоставить пользователю возможность в любой момент. Вместо того, чтобы возвращать их в ту же форму (с или без перезагрузки страницы), чтобы заполнить то, что они пропустили, покажите им only обязательные поля, которые они не заполнили:

^{скачать источник bmml - Каркасы, созданные с помощью Макеты Balsamiq}

Идея здесь заключается не в том, чтобы заставить пользователя чувствовать себя плохо, сообщая им, что они не заполнили все, что требовалось. Сделайте это в шаге и просто спросите их, что вам еще нужно, как будто вы разъясняете это с человеком. Имейте в виду, что вы никогда не выигрываете от того, что пользователь чувствует себя глупо, что не делает что-то правильно, поэтому просто прощайте их и спрашивайте снова - им никогда не нужно знать, потому что они сделали что-то неправильно в первую очередь!

Идеальный подход заключался бы в следующем:

1. Отметьте обязательные поля с текстом и стилем.

2. По мере того, как они заполняются, измените стиль, чтобы указать, что они полные (т. е. измените их фон от красного до синего, добавьте зеленую галочку и т. д.)

3. Отключите кнопку отправки (это хороший UX, следуя Принципы Poka-yoke ), но добавьте в него текст, в котором говорится что-то вроде «Вам еще нужно заполнить X-поля».

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

При отключении кнопки отправки вместо проверки данных на размытие или при отправке формы (в случае, если кнопка отправки не отключена), вы должны четко информировать пользователя о необходимых полях. В противном случае вы будете разочаровываться.

Вы также должны знать, что некоторые пользователи не имеют JavaScript, поэтому форма будет просто нарушена для них. Как правило, хорошей практикой является использование форм (хотя и менее «приятных»), когда JavaScript недоступен.