Html5 form validation with required and disabled element

Katrina picture Katrina · May 29, 2015 · Viewed 7k times · Source

I realize that you should never disable an element and also require it, because how could the user make it valid if it's disabled?

However, I have a <select> of products that I want my users to choose from. When they select one of the products another <select> for the product's models is populated, enabled, and required only if the product has one or more models. Otherwise, the model select is disabled and emptied.

While I like to think that my code is perfect and I can make it so that the model dropdown is never disabled and required at the same time, I'm not perfect. So, would the form be able to be submitted with a <select> that is disabled and required?

Update

Taken from w3.org:

Constraint validation: If the element is required, and its value IDL attribute applies and is in the mode value, and the element is mutable, and the element's value is the empty string, then the element is suffering from being missing.

Looked up specific of what it means to be "mutable".

A form control can be designated as mutable.

Note: This determines (by means of definitions and requirements in this specification that rely on whether an element is so designated) whether or not the user can modify the value or checkedness of a form control, or whether or not a control can be automatically prefilled.

Selects don't have a value, so it is determined by it's options.

The select element does not have a value; the selectedness of its option elements is what is used instead.

So, I think this means that if a <select> element was disabled and required, the form could be considered valid?

Answer

CBroe picture CBroe · May 29, 2015

http://www.w3.org/TR/html5/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute:

Constraint validation: If an element is disabled, it is barred from constraint validation.

http://www.w3.org/TR/html5/forms.html#barred-from-constraint-validation:

A submittable element is a candidate for constraint validation except when a condition has barred the element from constraint validation.

And finally, from the list of Constraint validation steps, http://www.w3.org/TR/html5/forms.html#constraint-validation:

3.1: If field is not a candidate for constraint validation, then move on to the next element.


That means, a disabled element will just be “passed over” when form validity is checked.

It doesn’t trigger any errors, and has no influence whatsoever on the validation state of the form it belongs to.