Only validate required form controls

[mdo]

This changes the form validation styles to only apply to elements with an explicit required attribute. While working on a new form example for #24898, it caught me off guard that we were saying optional inputs were valid when in fact there's nothing to actually validate. This change ensures that only required inputs, selects, textareas, and custom form controls are validated and effectively treats all non-required form controls as opt-in for form validation styles.

Here's the before and after to show you what I mean. Note how the second address line and two checkboxes shouldn't be green as it implies we performed validation on values that don't exist.

Before	After

[tmorehouse]

Does restricting it to only :required inputs prevent it from showing validation state/feedback for inputs that may not be required, but do have constraints (such as pattern, min, max, input type such as email, number , etc), when the input has a value which doesn't match the constraint?

[patrickhlauke]

hmm, good point @tmorehouse ... worth testing

[tmorehouse]

@patrickhlauke & @mdo

...saying optional inputs were valid when in fact there's nothing to actually validate.

This is not quite true... one would want to ensure an optional input does meet any constraints placed on it (min, max, pattern, step, maxlength, [type="email"], [type="url"], [type="number"], etc.), as :required is only one of many constraint types.

Imagine a form with two optional fields such as email address and website, which should contain valid formatted entries if values are supplied. the proposed solution above will not style these two form-controls if invalid values are supplied (one might only get the native browser tooltip error).

Here is a mockup that lets one validate optional form fields with constraints. If the form field value is empty, no validation styling applies. If they do have value it is checked for invalidity:

https://codepen.io/tmorehouse/pen/QOZZYd

The following CSS is used (based on https://css-tricks.com/almanac/selectors/i/invalid/#points-of-interest):

input:optional:invalid:not([value=""]),
input:required:invalid {
  background: hsla(0, 90%, 70%, 1);
}
input:required:valid {
  background: hsla(100, 90%, 70%, 1);
}

This appears to work well for textual style inputs and selects, and will style invalid non-empty constrained optional inputs. I didn't test with type="radio" or type="checkbox" though, but I suspect it will work OK. I'm not sure what happens if the input has a value="some value" attribute set (pre-populated).

Remove the selector input:optional:invalid:not([value=""]) from the first CSS rule, and you will see that the constrained optional inputs (two by type, and one by pattern) will not show the invalid styling when they have values that do not satisfy the constraints.

I was unable to get a "valid" optional non empty input to show green though (tested in Firefox using selector input:optional:valid:not([value=""])), but maybe that is OK visually.

You may need to target :not(:disabled) (or :enabled) just in case some browser validates a disabled field.

[mdo]

Testing this out, the problem with the :optional:not([value=""]) is that optional fields without any input from the user appear validated. This is undesirable in my opinion for the same reason why I opened this PR—we should appear to have validated a value that doesn't exist. It makes sense why it works this way, but I'm anticipating we'll hear reports of confusion around that.

[mdo]

Trying to play with this more: https://codepen.io/anon/pen/MOLEzK?editors=1100. Downside still is optional inputs that are valid with a non-zero value don't show green, but do when the input is invalid. Note the email address here:

[mdo]

Perhaps related to https://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css-on-a-page-i-am-visiting-and-do-no?

[tmorehouse]

Yeah, I was unable to make valid optional inputs green, but they do show red when invalid, and assuming the input has not preset initial value.

[patrickhlauke]

Arguably optional fields, even with constraints met, would be ok to show unstyled I'd say. Tricky conundrum...

[tmorehouse]

And optional fields that do not meet constraints should be styled invalid.

For me, styled invalid inputs are more important that styled valid inputs.

[tmorehouse]

May be valid inputs shouldn't be styled at all? or make the valid styling opt-in, and only style invalid inputs (as most cases one would want to point the user to fields that are wrong, rather than ones that are right)?

[mdo]

Going to wait on this and see what folks think after v4 goes stable.

[ludofischer]

Maybe it’s worth considering some usability studies, for example this one https://baymard.com/blog/inline-form-validation

[mdo]

Closing as stale.