Add html5 required attribute to webform components.

A 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.

Yes.
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.

What I think could be done is adding an "As HTML5" checkbox or drupal variable to switch all fields to use HTML5.

I 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.

Since 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

HTML5 required support seems pretty good. http://www.wufoo.com/html5/attributes/09-required.html. I am open to a patch that:

1. Addresses all existing components that accept required. I'm not sure #5 does, but I haven't checked.
2. Works with the new conditional required action. See webform.js / Drupal.webform.doCondtions().
3. Works with condtionally-hidden components. The required attribute will need to be removed to prevent the browser from refusing to submit empty hidden components.

Haven't tested 2. and 3. yet. Hope to find time for that soon.

Excellent. I'm preparing for a 4.8 release, if that helps define "find time for that soon". :)

I'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

1. There are components missing
2. I have to add about 2 LOC to webform.js to get it working
3. Works out of the box, as the hidden elements are not only hidden, but also disabled (via HTML attribute). So the browser won't check the required attribute

Ready :-)

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:

1. If you use the select component with multiple options and render the options as checkboxes, there's no chance to set a required attribute, as the checkboxes are independent from each other (there's no "checkbox group" like there's a radio group). If you do set the attribute, you'd end up in making every single checkbox mandatory. But radio buttons work as well as the select element (no matter if single or multiple choice).
2. File input fields. While it is technically possible in HTML5 (and working great), Drupal's default theme implementation for managed file elements is the weak spot here. You can't set attributes externally here, as within the theming function the "attributes" array is initialized as empty array.

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

Nice patch. Thanks.
Regarding your "exceptions":

1. Agreed. Nothing we can do about html5 required checkboxes.
2. We *could* supply our own theme function for managed files. Given that they will fail validation when they submit, I think the benefit probably doesn't justify the effort. So I agree with you.

Some changes:

1. In webform.js, we can't use jQuery.prop as we don't know that the version of jQuery you are using supports it. Fortunately, the file already has a shim for this.
2. It is cleaner to call the prop (shim) with a boolean parameter than put a call in either side of an if.
3. I also added adding the class 'required', which should have been there. While the core theme doesn't so anything with required (I think), other themes might.
4. Unrelated to this patch, the grid element doesn't release the required status when a grid is submitted and the grid is conditionally un-required. I changed the server-side conditional required code to extend the conditional status to any child elements that aren't themselves components. That doesn't exclude anything today because you can't put a conditional required on a fieldset, but it protects the future.

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.

You're welcome :)

Thanks for the suggestion!

Very cool addition, thanks! It works for me with radio and text input fields, however, not for checkbox ones.

Re #15: Read #10.

Thank 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.

Nice 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.

It 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).

Also 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.