Webmasters Gallery

Chris Dumez:

WebKit did not support HTML interactive form validation, which occurs on form submission (unless the novalidate attribute is set on the

element) or using the reportValidity() API. We are pleased to announce that this is now implemented in WebKit and enabled in Safari Technology Preview 19. Upon interactive form validation, WebKit will now check the validity of all form controls in the form

Form validation in Safari has long been a bummer. It didn’t even stop the submission of forms with invalid data. Hip hip hooray for that getting better! It will now prevent form submission and display a visual error:

I also only just heard about reportValidity(). It’s just like checkValidity(), except that in addition to returning true or false about the validity, it also triggers the UI:

If there is at least one form control that violates a constraint, WebKit will focus the first one, scroll it into view, and display a bubble near it with a message explaining what the problem is.

See the Pen checkValidity vs reportValidity by Chris Coyier (@chriscoyier) on CodePen.

After creating that demo for testing, I saw Chris Dumez had already created his own.

I imagine this will trickle down to iOS at some point? Not sure how that works.

Direct Link to Article — Permalink

[WebKit now has] HTML Interactive Form Validation is a post from CSS-Tricks