The invalid event

The invalid event is a unique event to html DOM form input fields. It is triggered any time the checkValidity() functions returns a false boolean value (see a slide below). Inside this event we can specify and define a set of actions that are going to happen any time a field contains an invalid data. 

Thus we can use the setCustomValidity() function to create a custom useful error message to the user and avoid giving him the standard default message from browser (preventDefault() is necessary to avoid this before doing anything further).