How to display all HTML5 validation errors at once?

Question

When we validate a form using HTML5 validation, it only displays one error, although there may be more errors in the form. Thus, the user will correct only one error and submit the form again to find out that there is another error. This can disappoint the user and the very poor user interface. How can we immediately see all validation errors?

There is some JavaScript written by TJ VanToll that receives all form validation errors and displays them at the top of the form. But I want to show all errors next to the form, the default is HTML5 by default.

Answer 1

Use the pattern attribute in html to validate your form.

 <input type="" pattern="" />