Seems that #2945890: Html required validation not working for radios element doesn't fix the HTML5 validation problems for "radios" webform elements.
Steps to reproduce:
- install and enable webform module (version 8.x-5.0-rc18) e.g. by using simplytest.me
- add a new webform
- add a "radios" element e.g. call it "gender"
- add 2 options e.g. "male" and "female"
- turn on form validation (by marking the "Required" checkbox) and enter some text into "Required message"
- view your new webform and submit it without selecting a radio button option
- you will get a system form validation error message in your messages block at the top of the page AFTER a form submit, but the expected behaviour would be: to get a HTML5 validation error message on your radio buttons group (inside the form) BEFORE form submit (server-side processing)
Causal research:
The committed patch in #2945890: Html required validation not working for radios element adds 2 jQuery selectors and the first of them
.js-webform-type-radios[required="required"],
should "fire" in our case, but the wrapping element doesn't have a "required" attribute at all.
So by adding a new selector
.js-webform-type-radios.required,
between the 2 existing selectors in the /js/webform.element.radios.js file the expected behaviour can be achieved.
But the real question is: Why is the required="required" attribute missing for the radio buttons group wrapping fieldset?
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | Before_patch_Webform.png | 29.68 KB | akash.addweb |
| #3 | After_patch_webform.png | 12.62 KB | akash.addweb |
| #2 | webform.webform.issue_2996916.yml | 3.95 KB | jrockowitz |
| #2 | 2996916-2.patch | 663 bytes | jrockowitz |
Comments
Comment #2
jrockowitz commentedThis regression was caused by #2986017: Fieldsets shouldnt have required attribute
The attached webform replicates the issue and the patch fixes it.
Comment #3
akash.addweb commented@jrockowitz, Thanks for providing steps, it makes RTBC easy for me to understand. I checked it using simplytest.me & attached the screenshot for the same/.
Comment #5
jrockowitz commentedComment #6
m_z commented@jrockowitz: Thanks a lot for your quick help.
@Ronak.addweb: Thanks for your quick testing.