Showing Custom error messages

Every browser has a default behavior that is executed on an invalid event. This default behavior contains all the necessary steps, from triggering the invalid event, detect the specific attribute that produces the error through the ev.currentTarget.validity.property and returns a predefined message inside a predefine box. 

If you don't want this to happen, and you want to return your own custom message and implement your custom functionality, you can apply preventDefault on the invalid event at the beginning. 

Then it is necessary to apply under each error a specific message. We do this by using the setCustomValidity() function, and inside we pass the string, which we are going to show to the user as a message.

For further submissions, and after that we set the setCustomValidity('') to an empty string. That means that after we have displayed the error, we don't block from submitting any further. The empty string specifies that there was an error for this attempt of submit. If we don't change then the block of submit continues!!!