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.
To improve the user experience, we need to add the new html5 attribute to our webforms.
Reference: http://www.w3schools.com/html5/att_input_required.asp
Comment | File | Size | Author |
---|---|---|---|
#12 | webform-html5_required_feature-1783628-12.patch | 7.42 KB | DanChadwick |
Comments
Comment #1
toleillo CreditAttribution: toleillo commentedAttached the small patch to include in textfield, textarea, email and number components.
Thanks!
Comment #2
quicksketchA couple of things:
- This needs to work with conditional fields, where the HTML5 required attribute is automatically removed when a field is hidden.
- This will probably only be applied to the 4.x branch, no new features are being added to 3.x.
Comment #3
thekevinday CreditAttribution: thekevinday commentedYes.
The javascript will need to be altered to unset 'required' attributes and set 'required' attributes depending on the appropriate conditions.
I ran across this while trying to solve #2054453: Make date fields on editable in webform.
As I need this functionality last week, I was thinking about sprinting a patch out that makes the webform more compliant with HTML.
What I think could be done is adding an "As HTML5" checkbox or drupal variable to switch all fields to use HTML5.
This way, people have a way to choose using the newer HTML5 code or not.
Comment #4
quicksketchI would recommend separating that option into #1375708: Provide a site-wide setting for utilizing HTML5 elements and keep this issue focused on the required attribute.
Comment #5
agoradesign CreditAttribution: agoradesign commentedSince the patch from #1 does not apply anymore to the current version and the referenced issue is still in progress, I'll post here this updated patch, that applies to current dev (and 4.1 of course), since this small piece of code is really very valuable - surely for many people
Comment #6
DanChadwick CreditAttribution: DanChadwick commentedHTML5 required support seems pretty good. http://www.wufoo.com/html5/attributes/09-required.html. I am open to a patch that:
Comment #7
agoradesign CreditAttribution: agoradesign commentedHaven't tested 2. and 3. yet. Hope to find time for that soon.
Comment #8
DanChadwick CreditAttribution: DanChadwick commentedExcellent. I'm preparing for a 4.8 release, if that helps define "find time for that soon". :)
Comment #9
agoradesign CreditAttribution: agoradesign commentedI'm currently testing it - looks good so far, but I haven't finished yet. If everything goes ok, I can confirm the patch is working today. If I have to fix/add something, then it depends, how much work it is. However, you'll get some more info later this evening
Update
Comment #10
agoradesign CreditAttribution: agoradesign commentedReady :-)
The updated patch supports the new conditional required action as well as all components, that support required action.
There are only two exceptions regarding the components:
PS:
During my test, it seems that I've found a problem with your new conditional required action. I've opened a bug report: #2478813: Conditional rules does not work with multiple select options component
Comment #11
agoradesign CreditAttribution: agoradesign commentedComment #12
DanChadwick CreditAttribution: DanChadwick commentedNice patch. Thanks.
Regarding your "exceptions":
Some changes:
One very tiny suggestion -- when you make a patch, use understores for the feature name, but continue to use dashes elsewhere: webform-some_feature_you_like-123456-12.patch, for example.
Great work. Thanks very much.
Committed to 7.x-4.x and 8.x.
Comment #14
agoradesign CreditAttribution: agoradesign commentedYou're welcome :)
Thanks for the suggestion!
Comment #15
roball CreditAttribution: roball commentedVery cool addition, thanks! It works for me with radio and text input fields, however, not for checkbox ones.
Comment #16
DanChadwick CreditAttribution: DanChadwick commentedRe #15: Read #10.
Comment #17
roball CreditAttribution: roball commentedThank you for your quick reply and sorry for not reading the whole thread. Now I understand that HTML 5 lacks support for a validation group of required checkbox input elements.
Comment #18
quicksketchNice job @agoradesign and @DanChadwick. My expected solution would have been to remove HTML5 validation from our buttons using
novalidate
(http://www.w3.org/TR/html5/forms.html#attr-fs-novalidate). but this solution is a lot easier to handle! It hadn't occurred to me that you could just remove the required attribute at will. Well done.Comment #19
DanChadwick CreditAttribution: DanChadwick commentedIt should be noted the select_or_other has an issue with required. #2481127: Incompatible with HTML5 required attribute, affecting Webform 7.x-4.8
We need to either skip required for select_or_other, get a patch into select_or_other, or fix it in webform (unlikely).
Comment #21
Baysaa CreditAttribution: Baysaa as a volunteer commentedAlso incompatible with Add capability to use custom error message for required field as it prevents PHP validation from running and showing the custom validation error message. Now a required field just shows the default HTML5 "Please fill in this field" error message, defeating the whole purpose of that patch.
I think with all the various plugins, and patches that rely on the PHP validation to run, this was a slightly hasty decision to add this "required" attribute imho. The attribute itself is not widely supported (yet ... =< IE 9 and Safari doesn't support), so there's no big gain from adding this attribute. Imho it's more of a hindrance, nuisance at this point. So we can either revert this, or perhaps patch it so that it doesn't interfere with PHP validation if there's a custom error set... perhaps with javascript, set/unset the required attributes... depending on a condition.