[Webform cards] Progress bar disappears on server validation error when using webform cards

Created on 7 April 2022, over 2 years ago
Updated 25 June 2024, 5 months ago

Problem/Motivation

While using webform cards (with multiple pages) the browser will go back on the page after a server validation error, the layout of the form is substantially changed and the progress bar is completely dropped.

This causes a bit of confusion in the user experience and unexpected behaviour, some of our internal Q/A testing marked this multiple times as a bug as not "being able to go back in the previous steps" and "form looks different/broken".

Steps to reproduce

  1. Create a multi-page webform using cards
  2. Set a required field in page 1
  3. Set a required field in page 2
  4. Set a required field in page 3
  5. Compile all pages then use devtools to tamper with the first 2 pages (or disable clientside validation)
  6. Submit, webform will be shown again with cards 1 and 2 shaking on the screen

Proposed resolution

  • Show first errored page
  • Ideally keep the progress bar showing
  • Mark the errored steps

Attached a patch based on release 6.1.3 that allows an extra setting on cards that can switch between showing all cards or the first card and the errored steps on the progress bar.

✨ Feature request
Status

Needs review

Version

6.2

Component

Code

Created by

πŸ‡¬πŸ‡§United Kingdom luigimannoni

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024