Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
I have radio buttons, that look like this
mitglied:
'#type': radios
'#title': Mitglied
'#options':
ja: ja
nein: nein
'#options_display': side_by_side
'#required': true
When the user is loading the page none of the radio buttons is selected. If the form is submitted without selecting any option it reloads with an error message integrated into the page instead of not reloading and showing a small popup (like when the e-mail field is left empty). This is not that fatal, but if you use remote posting then the external site is opened even when the radio buttons are empty. I don't know if it is clear what I mean....?
Comment | File | Size | Author |
---|---|---|---|
#29 | Screen Shot 2017-06-11 at 9.14.37 PM.png | 33.46 KB | jrockowitz |
#25 | Screen Shot 2017-03-06 at 9.23.01 AM.png | 44.92 KB | jrockowitz |
#18 | if_radio_buttons_are-2856795-18.patch | 9.92 KB | jrockowitz |
| |||
#15 | if_radio_buttons_are-2856795-15.patch | 10.12 KB | jrockowitz |
#11 | Screen Shot 2017-03-04 at 5.57.43 AM.png | 151.86 KB | jrockowitz |
Comments
Comment #2
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedThe popup is client side HTML5 validation and radio buttons are not supported.
You could try using the Clientside validation module but I am not sure it supports required radio buttons.
If you are posting a webform to remote server. The remote server should perform server-side validation.
Comment #3
johnnny83 CreditAttribution: johnnny83 commentedYes, radio buttons are supported (although not recommended, but because of UX):
https://www.w3.org/TR/html5/forms.html#the-required-attribute
http://stackoverflow.com/questions/8287779/html5-how-to-use-the-required...
Comment #4
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedThis is an issue with Drupal core. I am not sure there is a workaround for this bug.
Comment #5
johnnny83 CreditAttribution: johnnny83 commentedI think the problem is that the
required="required"
is only put to thefieldset
wrapper, but not to theinput
tags. Maybe there is a way to solve this on the YAML view source page? I already tried there to add therequired
attribute to the options, but it doesn't work.Comment #6
davy-r CreditAttribution: davy-r commentedHi jrockowitz, what is the issue # for this core bug?
Comment #7
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedI am not sure if core is considering this an issue yet but core wraps all radios and checkboxes in a fieldset and #attributes are not applied to the input.
Comment #8
johnnny83 CreditAttribution: johnnny83 commentedIn case of checkboxes the required attribute is added to the input tag. For the radio case I will use js for the moment:
Comment #9
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented@johnnny83 You have come up with the workaround.
Below is reusable code snippet based on your JS solution.
The next step would be getting this solution working with #states:required
Comment #11
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedIf you enable the webform_test.module, there is a dedicated webform to test this workaround (/form/test-element-radios)
Comment #12
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedComment #15
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedComment #18
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedComment #20
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedI committed the patch. Please download and review the latest dev release.
Comment #21
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedComment #22
davy-r CreditAttribution: davy-r commentedThanks for the quick and clean solution!
Exactly the same issue exists for "checkboxes" (plural), "checkbox" works fine. Do want me to create a separate issue for this?
Comment #23
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedCheckboxes can't be required via HTML5 validation.
http://stackoverflow.com/questions/6218494/using-the-html5-required-attr...
Comment #24
davy-r CreditAttribution: davy-r commentedInteresting, never realized that before. So your consideration is that required on a checkbox does something different that most people would expect, right?
From a different perspective; If someone select "required" on a webform-checkboxes-element, that person might expect that it follows the official HTML5 specs and get the required attribute on each checkbox.. That person should now use the "Element custom attributes (YAML)" option to get their desired required attribute.
Maybe you could provide a note to the webform-checkboxes-element that describes this?
Comment #25
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedYes, a single checkbox can be required...
...there is no way to require that a checkbox is checked within a group of checkboxes using HTML5 validation.
This functionality require some custom JS.
If you provide me with help text, I will add it to the checkboxes element.
Comment #26
davy-r CreditAttribution: davy-r commentedNot really sure if the notes are necessary, but I was thinking about something like:
Note1: Selecting "required" doesn't add a required attribute to the individual checkboxes, you can accomplish this using the "Element custom attributes (YAML)" option.
Note2: Client-side validating that at least 1 checkbox of a checkboxes-group is checked is not supported by HTML5 validation.
Comment #27
johnnny83 CreditAttribution: johnnny83 commentedMaybe you could add that a solution could be to create one checkbox group per checkbox.
I think that anyway a JS fallback solution for browsers that don't support the required attribute is necessary...
Comment #28
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedI think this might be something that the Clientside validation module should address.
https://www.drupal.org/project/issues/clientside_validation?text=checkbo...
I think slowly but surely that Webform module might benefit from requiring (or strongly recommending) the Clientside validation module.
Comment #29
jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commentedThis issue has been fixed.
Comment #30
johnnny83 CreditAttribution: johnnny83 commentedThank you!