[WebKit now has] HTML Interactive Form Validation
WebKit did not support HTML interactive form validation, which occurs on form submission (unless the
novalidateattribute is set on the
<form>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
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.
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.