Многошаговая форма с различными вариантами ветвления
Нужно сделать многошаговую форму с различными вариантами ветвления. Один вопрос формы - один шаг. Ответы на все вопросы радио-кнопки, либо чекбоксы. Всего в форме около 20 вопросов, но пользователю выдаются только некоторые из них. В зависимости от вариантов ответов пользователя ему должно выдаваться только от 4 до 6 вопросов из всего списка.
Есть вопросы по реализации данного функционала. Я думал сделать версткой каждый отдельный шаг формы и потом через JS выдавать пользователю только нужные вопросы. Но что делать в данных ситуациях: 1) Как в результате отправлять данные только по тем вопросам, которые были показаны пользователю, а не по всем вопросам из списка. (Если вопросы скрыты, то в форме они все равно существуют) 2) Все показанные вопросы обязательны к заполнению. Как сделать валидацию формы в данном случае? Как отключить валидацию для тех вопросов, которые пользователю показаны не будут и включить только для показынных вопросов?
Ответы (1 шт):
Интересный случай.
Там, где я его встречал, пользователю содержимое вопроса присылалось из бэкэнда.
Если у вас есть возможность изменить серверную часть приложения, ниже вариант.
То есть вместо того, чтобы хранить все 20 вопросов в 1 форме и с помощью JS выбирать и показывать следующий, попробуйте сделать небольшой REST API на сервере.
Тогда шаг вашей многошаговой формы будет работать примерно так:
- При ответе на один вопрос, его сразу отправлять на сервер как отдельную форму, например
POST /send-answer. - На сервере ответ запоминается где-нибудь в сессии
- Дальше JS после получения успешного ответа от
/send-answerотправляет на сервер запросGET /next-question, и сервер возвращает новый вопрос и варианты ответа - JS использует полученные данные и рисует HTML форму
Такой подход хорош тем, что не надо верстать каждый вопрос отдельно, от сервера можно получать JSON с информацией и уже данными из него наполнять какой-то универсальный HTML шаблон.
Когда вопросы должны закончиться, лучше тоже решать на сервере, так безопаснее. Тогда выйдет, что вместо очередного вопроса сервер вернёт, ну например, флаг о том, что все вопросы уже отвечены. При этом на стороне сервера все результаты целиком можно уже обработать окончательно, а JS при получении такого флажка выведет, к примеру, "Опрос окончен" или сделает ещё один запрос на сервер для получения результатов опроса.