HTML5 Validation Prevents Submission in Tabs

The #87 patch applies cleanly and does what it has to do. The inactive tab gets opened and shows the required field that was left empty.

The last submitted patch, 31: field_group-HTML5_validation_prevents_submission_in_tabs-2969051-31.patch, failed testing. View results →

The last submitted patch, 40: 2969051-40.patch, failed testing. View results →

I'm finding the #87 patch works, but I am still seeing the error in the console. Since an earlier patch I've used (#71) got rid of the console error, I was not expecting to see it.

Hi All,

I'm reopening this since it still an issue when using the Multistep option. We have a contentype with 3 multi-groups under this scenario but unfortunately after upgrading to x.3.4 they stop working on the Admin side (not even user 1 can create content). I've applied the patch on #87 successfully but the issue persists, I have also disabled the HTML5 validation on ALL forms $form['#attributes']['novalidate'] = 'novalidate'; on a custom module. There are no permission implemented, as i mentioned not even user 1 can go through the second step (we have 3 steps using field group ) Works OK on the front end theme. Gin works ok for other contentypes without Field Group. Dont see any Javascript errors on console or any other php errors either.

Personally I would prefer that different group types had separate issues per #53.

Patch #87 doesn't work when the form is rendered via ajax.

I have updated sector and hv re-rolled patch #87.

FWIW a similar problem was fixed in core for vertical tabs. See 🐛 Correct vertical tab does not focus on form validation Fixed

Latest patch seems to have no effect in Gin and Field Group in Drupal 10.

The latest patch works for me with tabs on Gin in Drupal 9. Thanks a lot for the huge improvement.

The last 2 comments are saying the opposite... could we maybe get more elaboration on #103? I'm using this patch with Claro and it is resolving this issue, so I'm going to put to RTBC, but with the caveat that I'm not testing in Gin and 103/104 are saying it's working/it's not.

@kevinquillen & @ayalon what's true for Gin? (#103 vs. #104)
It it worth a contrib test with gin as test_dependency to be 100% sure?

Could this please use a MR instead of further patches?

I've tested the patch in #100 with Drupal 10.1.5 and GIN 3.0.0-rc7. It resolves the issue for me.

@Anybody
Created a MR

- Changing to Needs review

works for me in drupal 9.5 will this be in the latest version of the module soon?

Latest patch works well for me, Drupal 9.5.9 and Field Group 3.4.0.

Patch #100 works also well for me, Field Group 3.4 and Drupal 10.1.6 with Claro theme.

The last patch #100 didn't work for me because https://www.drupal.org/project/drupal/issues/2722319 🐛 s using Text Editor always fail HTML5 validation when "required" is added via #states Needs work CKEditor removed the "required" attribute from the textarea during startup. So I adjusted the patch with these changes.

The last submitted patch, 114: 2969051-100.patch, failed testing. View results →

The last patch #100 didn't work for me because https://www.drupal.org/project/drupal/issues/2722319 🐛 s using Text Editor always fail HTML5 validation when "required" is added via #states Needs work CKEditor removed the "required" attribute from the textarea during startup. So I adjusted the patch with these changes.

The last submitted patch, 116: 2969051-100.patch, failed testing. View results →

Hi everyone,

Thanks a lot for raising this issue and contributing a patch, it's greatly appreciated !

I would like to confirm the patch from #116 applied properly with composer and seems to have fixed the issue in my case with the Gin admin theme and horizontal tabs (field_group), with the following versions:

• drupal/core: 10.2.0
• drupal/field_group: 3.4.0
• drupal/gin: 3.0.0-rc8

 
Client side validation now seems to be working properly by changing to the tab with the required field and focusing the right element.

Thanks again very much for your help with this issue.

Correction:
After doing a little bit more testing, I've been having the following JS error with the patch from #116 after saving a content form:

Uncaught TypeError: Cannot read properties of null (reading 'classList')
tabs.js line 119
at Drupal.FieldGroup.fieldIsValid (tabs.js?119:34)

Which seems to correspond to the following line of code:
https://git.drupalcode.org/project/field_group/-/merge_requests/40/diffs...

Added above at #113:
@brandonlira: Not sure exactly what use case that should cover but there might be a little bit more testing to be done, with perhaps a few more cases/checks to be added in the JS code.

Reverted to using patch from #100 which fixed my validation issue without prompting this JS error on form save.

Thanks again everyone for the great help!

the patch #116 worked for me.

I have a site where the node aded form for a content type has every element inside a collapsed fieldset: applying the patches in #100 and #116 still generated JS errors that silently prevented form submission when I trry to submit the form without filling anything.

#116 worked for me in Gin admin theme with horizontal tabs. But when i add a paragraph with field groups, it doesn't work anymore

The patch provided in #100 and MR!40 does not fully work for me.
I use horizontal tabs with a Claro 10.2.5.
If there are required fields in another tab that haven't been filled out, the JS takes me to one of those other tabs when I add a paragraph to the current tab.

Small update of patch provided in #100 🐛 HTML5 Validation Prevents Submission in Tabs Needs work in order not to break the behavior of adding a paragraph to a tab.

I tried '.form-submit:not([formnovalidate,.field-add-more-submit])' but it was not a valid selector (at least on firefox) ; so I just chained another :not() => '.form-submit:not([formnovalidate]):not(.field-add-more-submit)' and I am wondering if it's a good idea to have an array declaration in the first "not" since it's not well supported by all browsers yet.

#124 applied and fixes the issue!
Merci @MacSim !

any other testers?

To help getting this committed have I applied this into one of our production sites. I'll also make sure to send testers in there and take if for a spin.

scott_euser → changed the visibility of the branch 8.x-3.x to hidden.

scott_euser → changed the visibility of the branch 2969051-html5-validation-prevents to hidden.

Bit of a mess between patches & merge requests & outdated merge request fork.

Now the remaining MR is actually merge-able and contains identical content to the patch in #124. As such, marketing this as RTBC as I haven't actually made any change - just did a bunch of issue clean-up - and testing this it works as expected.

For future travellers please follow https://www.drupal.org/docs/develop/git/using-gitlab-to-contribute-to-dr... → and download the patches locally from the MR to your project as per the recommendations/instructions rather than adding more patches here and having patches and MRs diverge again. Ie, let's keep us all moving forward on the same track and make life easier for the maintainers of this module to review & merge. Thank you!

Okay I believe credit list is also now up to date up; tried to also help maintainers by reviewing all people who have made contributions matching/exceeding the guidelines (ie, not just 'it works' type comments, meaningful reviews, code contributions, etc)

Okay I have made changes now, sorted all eslint errors, fixed typos.

The phpstan issues are unrelated to this MR, they are new to the module and therefore raised separately.

To help progress this issue if someone could please:

1. Review and test 🐛 Fix deprecated extending of render element Needs review to RTBC it so tests here can go all green (including phpstan)
2. Re-review this consider the changes I made to eslint/typos to get this back to RTBC

Then we'll hopefully all get the satisfaction of getting a 6 year old issue over the line :)

tested MR!57 on D10.3, php 8.3, on 3.x-dev@dev
looks good!

Thanks for fixing the patches/MRs!