Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

When a form has sections or tabs, the submission may not be allowed due to invalid controls that are not currently visible. For example, a section that is collapsed or a tab that is not currently selected may have an invalid control. This is indicated in the header section and tab label color changing to red.

Troubleshooting Hidden Required Fields

Designers may come across an issue while testing their forms/flows in which the Submit or Continue buttons do not work even when all the required fields in the form are filled in. This usually happens when you have a hidden field that is required or that has invalid value. Please check if your form has any hidden fields or sections where the required property is set.

Use developer tools in your browser to find hidden controls which are invalid or required, and are causing the submit button to remain disabled.

  1. Open your form in Test Mode or using the Share URL. Fill it out and attempt to click Submit/Continue. If Submit/Continue remains disabled, continue to step 2.
  2. Open your browser developer tools. This varies by OS and browser, but on a PC you can use the keyboard shortcut Ctrl-Shift-i.
  3. In Elements/Inspector tab of developer tools, search for all instances of s-invalid. This will take you to the HTML of all the controls which are in invalid state.
  4. You can generally get the name, indicated by cname, of the control from that HTML.

Note that if a required control is inside a hidden section, then that section will also be invalid and you will see s-invalid in its HTML. You will have to continue searching further to get to the actual control. Once you locate the section(s)/control(s) that are invalid, check your business rules to see if they are being mistakenly set to required or invalid.

Invalid Form Notification for Users

...