Displaying 'Please fill out this field' for all empty and required fields

Question

Is it possible to have a HTML/PHP page display multiple instances of the default \'Please fill out this field\' message? As in, right next to / underneath every required fie

Answer 1

It looks like the link you posted showcases the use of reportValidity. Bear in mind, it's not supported in some browsers.

var formElement = document.querySelector('#the-form');
formElement.reportValidity();

Since reportValidity might fail (if not implemented in the browser) you could just make a quick and dirty check:

if (formElement.reportValidity) //check that the function exists on the form object
    formElement.reportValidity()

This relies on the input elements having html5 validation attributes like .

If you want a more complete validation flow, you will have to write a much more complex piece of software or re-use an existing solution.