html form validation

Browsers can check a form's input and pop up relevant error messages on submission to determine its validity. 

This feature is only available if the form is submitted via a submit button. 

Using  type="button" will disable the popup error messages

If your form/app refreshes when you click the submit button, add to your form:

onsubmit="return false;"   (see below for an example)

To make this determination, the browser uses html attributes:

• min, max, step, pattern, 

• required 

• maxlength and type. 

• required        NOTE you should add this to all your input fields

So input elements on forms which make use of the above attributes are checked for validity by the browser, which sets the element's associated variables to true or false

You can check if a specific form element (eg; an input, select or textarea) passed html validation by using checkValidity 

checkValidity returns true if the specific element contains valid data.

You can also check if the ALL the form's input passed html validation by calling checkValidity on the form its self.

In this case checkValidity returns true if  ALL  the form's data passes validation.