If client-side validation is not carried out, it may cause a bad user experience. Users may feel a noticeable delay because form data needs to transfer back and forth between the web browser and server. So it is crucial to validate the form data before sending it to the server-side.
Simple HTML code
The script section
Form validation with HTML5
Using html5, there are built-in features for form validation, thir attributes come with html5.
Form validation attributes
The required attribute checks if the input value is entered by the user. This attribute can be used on search, month, number, password, date, radio, time, text, and also on elements such as select and textarea.
The pattern arrtibute is available for input elements with type text, url, tel, email and password. It allows us set a regular expression as the value and the browser will validate it.
The autofocus attribute focus on that single particular form control on page load. This attribute can be used only once in a single webpage.
This attribute shows some hint in input control. Placeholder value will disappear on focus or keypress. Supported controls for placeholders are input control and textarea.
A control with readonly attribute is not editable
By the user.
Min and Max
The min and max attribute allows you to define a valid range of valid entries to the following tag types: number, date, range, time, week.
The step attribute checks if the input is an integer.