Update form elements to use `:invalid` for HTML5 pattern and validation requirements about pico HOT 3 CLOSED

Hi @ajusa,

Actually, before this commit (d49c7ff), Pico was using :invalid. Precisely one year ago.

The problem is that the fields are :invalid before the form submission and before the user enters any text.
https://codepen.io/picocss/pen/vYJxvdJ

We can find solutions with complex selectors like input:required:focus:valid or input:not(:placeholder-shown):invalid.... but it's always a bit hacky and very opinionated.

At least, aria-invalid="false" and aria-invalid="true" give some control to developers.

To have a fine control of the forms validation, it is often necessary to add some javaScript.

from pico.

Got it, thanks for the response! I've only been using pico for the last few months, and was wondering why it wasn't using the built-in validation selectors. That reasoning makes perfect sense!

from pico.

Hello! I would like to revisit this issue. :user-valid and :user-invalid are both widely available in modern browsers and are only applied once the user has interacted with the element - that should eliminate the issue above and remove the requirement for JavaScript twiddling and noodling

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid#browser_compatibility

from pico.