Form validation used to take place on the server after the client had provided all of the required information and then clicked the Submit button.
Suppose the server discovers that part of the information given by the client was incorrect or simply missing. In that case, it will have to send all of the information back to the client and request that the form be resubmitted with the correct information. This was a very big operation that placed an excessive strain on the server.
Basic Validation – First and foremost, the form must be double-checked to ensure that all essential data has been put into each area on the form. Simply looping over each field in the form and checking for data would be sufficient here.
Data Format Validation – The second step is to validate the data that has been provided to ensure that it is in the right form and value. To verify the accuracy of the data, further logic would have to be used.
As part of form validations, usually, we do the following validations:
- Validate Username
- Validate Email address
- Validate Password
- Validate Phone Number
- Validate Numeric Fields
- Validate Empty fields or Required fields
An email is a string of characters (a subset of ASCII characters) divided into two sections by the @ sign. An email address with the subject “email” and the domain name, which is email.
- The email part contains the following ASCII characters.
- Uppercase (A-Z) and lowercase (a-z) English letters.
- Digits (0-9).
- Characters _ –
When filling out a form, it is sometimes necessary to validate the password.
Passwords may be created using various methods, with their structures ranging from basic, fair, or strong.
Check a password that is between 5 and 15 characters and that has only letters, numbers and should not be blank.
First, we confirm a phone number with ten digits that does not have a comma, spaces, or punctuation, and that does not have a Plus sign in front of the number. All that is required is that you validate your phone number and only phone numbers with 10 digits will be permitted. The function is shown below.
We have used the isNaN() method to validate that the NumericField contains just numeric values. isNan() accepts text-field data as an argument, and if the data is a number, isNaN() returns true; otherwise, it returns false. If the data is not a number or a mix of numbers and alphabets, isNan() returns false.
If an input field (username) is left empty, this function generates an alert message and returns false, preventing the form from being submitted:
Simple Example of HTML Form
HTML Form controls text fields, password fields, checkboxes, radio buttons, a submit button, menus, and other controls.
When a user fills out an HTML form, the data is transmitted to the server for processing, and the data includes information such as the user’s name, email address, password, phone number, and so on. Below is the simple code for the HTML Form.