HTML 5 Client Side Form Validation Example

How to make a form field "required" using HTML 5.

Ah, form validation. It sucks, it’s not fun to apply, and even the most advanced and time-consuming methods still have their way of allowing pointless bot spam to flood your inbox. But what about real users, or actual human beings that want to use your form – how can you provide a very simple method of form validation without the headache of cranking out tons of code and server-side validation techniques? Let’s looks at the sheer simplicity and functional use of HTML 5 client side form validation.


What Is HTML 5 Client Side Form Validation & How Does It Work?

To put it simply, HTML 5 form validation works with your browsers’ ability to recognize a form field that you specify as required, the browser then uses built in functionality to enforce the form field. As with any client side form validation, you will definitely still get spam submissions however for the sake of practical use for genuine users and ensuring all necessary form fields are indeed filled out – HTML 5 form validation will get the job done.


How To Make A Form Field Required Using HTML 5

This is the easy part, in order to enforce a specific form field to be required we will need to look at some simple form code. Let’s first look at a standard form input field:

<input placeholder="Full Name" type="text" name="name">

Now, let’s make this form field required by making a small addition within the input tag:

<input placeholder="Full Name" type="text" name="name" required>

That’s it, by simply adding “required” within the input tag, this tells the browser that this field must be populated before being submitted. If a user attempts to submit the form without filling in all of the required fields, the browser will display either a highlighted border or tooltip on the required field(s) depending on the specific browser being used.