[csswg-drafts] [selectors] pseudo selector to match forms ValidityState

jimmywarting has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] pseudo selector to match forms ValidityState ==
## 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

```html
<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](https://docs.angularjs.org/api/ngMessages/directive/ngMessages#example)

Say you got custom errors like this:
```html
<input type="text">
<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 and hide. I would want to use the same properties that exist on the constraints object `input.validity` aka: ValidityState

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

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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1525 using your GitHub account

Received on Tuesday, 13 June 2017 12:08:57 UTC