Problem/Motivation

Per #2787179: Ensure visibility of invalid fields (JS), it added frontend validation for required fields on multiple tabs. However, if there are multiple tabs with multiple fields you don't get prompted/pushed to the next tab to fill out the required field. Instead, the page will submit, and you'll experience server side validation.

I think this is fine but would appreciate consistency and expect all required tabs to be validated in the fronted.

Steps to reproduce

  • Add field groups
  • Add three tabs (horizontal)
  • Make a required field on each tab
  • Try submitting the node outright. You should be prompted to fill out the current tab's required field
  • Once the current tab's field is populated, submit again. You should be jumped to the next tab and required field.
  • Now that the 2nd required tab has been filled in, submit again. The page will submit and you'll see a server side error

Proposed resolution

Regardless of the number of required tabs, form validation occurs in the front end.

Remaining tasks

User interface changes

API changes

Data model changes

Comments

robpowell created an issue. See original summary.

grevil’s picture

Issue summary: View changes
scott_euser’s picture

Status: Active » Closed (cannot reproduce)
StatusFileSize
new706.99 KB

I believe this is now also fixed in 4.x. Apologies if I have gotten it wrong and should be re-opened!

Here is a gif of it working:

Then I spotted that it says specifically horizontal in the issue summary so attempted with that too:

scott_euser’s picture

Note that if you have a mix of horizontal and vertical tabs, that will still not work but that I created as a separate issue:

#3505046: Horizontal tabs are not horizontal with Field Group 4.x due to regression