[selectors] pseudo selector to match forms ValidityState

[jimmywarting]

The Problem

When I did put a pattern to one of my form elment, it yields a tooltip saying "Enter a correct pattern"
The browser don't do a good job at displaying the correct pattern to use. So i need a way to inform them how the field should be written (look like)

<input 
  type="text"
  name="username"
  minlength="2"
  maxlength="20"
  required
  pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$"
/>

The solution

I would want it to behave a little like angular´s ngMessage, see demo

Say you got custom errors like this:

<input ...>
<div class="required">Username is required</div>
<div class="minlength">Username is too short</div>
<div class="maxlength">Username is too long</div>
<div class="pattern">Use only letters and numbers</div>

Now to style the right error message green or red, show or hide. I would want to use the same properties that exist on the constraints object input.validity (ValidityState)

ValidityState {
  badInput, patternMismatch, rangeOverflow, rangeUnderflow
  stepMismatch, tooLong, tooShort, typeMismatch, valueMissing
}

input:valueMissing ~ .required {display: block}
input:tooShort ~ .minlength {display: block}
input:tooLong ~ .maxlength {display: block}
input:patternMismatch ~ .pattern {display: block}

[SebastianZ]

This is covered by the :invalid pseudo-class.

Sebastian

[jimmywarting]

the :invalid is too general.

[SebastianZ]

I see. And you're right, there doesn't seem to be more fine-grained matching of invalidity except the :out-of-range pseudo-class.

Note that CSS uses hyphen-separated syntax, not camel case. So, your proposal should rather look like this:

input:value-missing ~ .required { display: block; }
input:too-short ~ .minlength { display: block; }
input:too-long ~ .maxlength { display: block; }
input:pattern-mismatch ~ .pattern { display: block; }

Another way would be to allow parameters for the :invalid pseudo-class. That would group the different error types. I.e. this could then look like:

input:invalid(value-missing) ~ .required { display: block; }
input:invalid(too-short) ~ .minlength { display: block; }
input:invalid(too-long) ~ .maxlength { display: block; }
input:invalid(pattern-mismatch) ~ .pattern { display: block; }
input:invalid(out-of-range) ~ .outofrange { display: block; }

which would allow to match different types of errors by allowing to provide multiple keywords:

input:invalid(too-short, too-long) ~ .invalidlength { display: block; }

Furthermore, for empty inputs there is already issue #1283. So empty inputs requiring a value could then also be matched via input:required:empty. Though an explicit way to check whether a required field is missing the value is probably nicer and more consistent to the other proposed pseudo-classes.

Sebastian

[jimmywarting]

Like the idea! Which we had came up with parameters for the :invalid pseudo-class before we introduced :out-of-range, maybe that would not have existed if we came up with this before.

It seems like this idea of parameters is also better feature wise if we decide to add new validity properties in the feature...

[jimmywarting]

Just for the shake of it i wrote a jQuery.expr

$.extend($.expr[':'], {
  validity: (node, i, args) => 
    args[3]
    .replace(/-([a-z])/g, g => g[1].toUpperCase())
    .split(',')
    .some(prop => node.validity[prop.trim()])
})

$('input:validity(value-missing)').css('color', 'red')