How to Perform Form Validation with HTML and JavaScript
Tags: webdev, html, javascript, programming
Published: 2021-09-14 14:03:26

##Why form validation is important
Users use web forms to sign up or fulfill online transactions. If you have user input saving to a database, you better make sure the data collected is in the correct format. Someone could crash your website by putting ridiculous values into forms. 

Form validation can also be a security measure. Letting people put whatever they want into forms opens you up to SQL injections. There're way more reasons why form validation is important, but these are the two that I've seen destroy websites.

##Form validation 101
Performing form validation on the front-end (before submitting data to the server) is called [client-side form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation). While you can also validate data on the back-end/server-side, I will focus on the client-side.

There're two types of client-side validation: 
* Built-in form validation (`HTML`)
* `JavaScript` validation

Built-in form validation has better performance than JavaScript but is less customizable. In the following example, I created a [form](https://tingchun0113.github.io/form-validation/) with empty fields.
![https://tingchun0113.github.io/form-validation/](https://cdn-images-1.medium.com/max/800/1*qtt1AeqToRHX39wiKu_9yA.png)

Try to type in "Jo" and hit the **Register** button:
!["Jo"](https://cdn-images-1.medium.com/max/800/1*cZXft1-Lhq4ZS6qiSVWRvQ.png)

After fixing it, the border of the input field will turn from red to green:
![Pass](https://cdn-images-1.medium.com/max/800/1*Ljx_LhZE2iH1rxkjXzF89w.png)

You can try out other fields as well, but below are the rules I imposed (using built-in form validation): 

* Full Name: *min* 3 characters; *max* 100 characters
* Phone Number: 3 digits-3 digits-4 digits (1111111111 won't pass)
* Email Address: "@" has to be included
* Website URL: "http://" or "https://" has to be included
* Password: 1 uppercase character, 1 lowercase character, and 1 number

Besides, I used JavaScript validation to ensure that "Password" matches "Confirm Password."

![Match passwords](https://cdn-images-1.medium.com/max/800/1*bOWtooNqKaXt42MnncqTXA.png)

---
##Time to see some codes
Built-in form validation (HTML) provides a bunch of attributes to help validate data. Here're some examples:
```
* required
* minlength="3"
* maxlength="100"
* pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
* type="email"
```
Putting them into HTML:
{% gist https://gist.github.com/tingchun0113/b046184fa8f5a9886eea4b1a76e62964 %}

Then, check whether passwords match using JavaScript validation:
```
if "Password" === "Confirm Password", passwords match
```
{% gist https://gist.github.com/tingchun0113/b00e7b5ed4a6963bee8b992544631fe8 %}

You can find the full [JavaScript file](https://github.com/tingchun0113/form-validation/blob/main/script.js) and other project files in this [repo](https://github.com/tingchun0113/form-validation).

---
##Final thoughts
Just don't forget that you can (and you should) validate the data on the server side. It's the final line of defense before the database. If you find this article useful or have any questions, connect me on [LinkedIn](https://www.linkedin.com/in/tingchunw/) or follow me on [Medium](https://tingchun0113.medium.com/) for more articles.