We'll do this by adding a listener for the class, we'll get every field, loop through each one, and check for errors.
We'll store the first invalid field we find to a variable and bring it into focus when we're done.
Even when validation is supported perfectly, there may be times when custom validations are needed and a more manual, Vue-based solution may be more appropriate. Beneath that there is a paragraph that shows or hides itself based on an error state.
Once we show an error, your visitor will (hopefully) fix it.
Once we know there's an error, it's helpful to know what the error actually is.
We can use the other Validity State properties to get that information.
If no errors are found, the form can submit normally.
See the Pen Form Validation: Validate on Submit by Chris Ferdinandi (@cferdinandi) on Code Pen.
// If too short if (Short) return 'Please lengthen this text to ' Attribute('min Length') ' characters or more.