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
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | screen-capture (3).gif | 706.99 KB | scott_euser |
| field_group_3_tabs.mov | 1.97 MB | robpowell |
Comments
Comment #2
grevil commentedComment #3
scott_euser commentedI 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:
Comment #4
scott_euser commentedNote 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