HTML5 has data validation capabilities that can be useful for web application development. Accepting data from unknown website visitors is a dangerous thing. However, dynamic web applications must have user interaction to work. The conundrum is how to do both.

One method is to use data validation, which is the process of verifying that the data your site visitors enter into the form fields is correct. There are two ways to tackle that process:

• On the server, with server-side programming code
• In the client browser, using HTML, CSS, and JavaScript

You can use server-side programming to validate form data. However, waiting until the browser has uploaded the data to the server to validate it can be somewhat cumbersome. By that time, the site visitor has already entered all the form data. Returning a web page making the site visitor re-enter all that data just because of one typo is not a good way to retain customers.

This is where client-side data validation comes in handy. The more data you can validate in the browser as the site visitor enters it, the better the chance you have of receiving valid data in the first place.

Holding your place

HTML5 helps that process with a few additional features. One such feature is the placeholder attribute for the input element. The placeholder attribute appears as gray text inside the form field and can provide a suggested format for the data to enter:

<label>
Enter your daytime phone number:
<input type="tel" name="num" placeholder="(nnn)nnn-nnnn">
</label>

The browser displays the placeholder value inside the input form field, but as gray text.

As you start typing text in the input field, the placeholder text disappears.

Making certain data required

Another data validation attribute added by HTML5 is the required attribute:

<input type="text" name="lastname" required="required">

The required attribute marks the form field so that the browser won't upload the form if that field is empty. Some browsers will display an error message indicating which required form field(s) are empty.

Validating data types

Not only do the additional HTML5 input types produce different types of input fields, but you can also use them to validate data. Browsers that support the new HTML5 data types will mark input form fields that contain data not in the proper format with the invalid state.

CSS provides pseudo-class rules to style elements based on their state. You use the invalid and valid pseudo-class states to style input fields with invalid data differently from input fields with valid data. This helps make the fields with invalid data stand out in the form.

Here's a quick example you can try to test this feature:

1. Open your favorite text editor, program editor, or IDE package.
2. Type the following code:

   Testing for invalid data

   You must be over 18 to participate

   Age:
3. Save the file as invaliddatatest.html in the DocumentRoot folder for your web server (c:\xampp\htdocs for XAMPP on Windows or /Applications/XAMPP/htdocs for XAMPP on macOS).
4. Start the Apache web server from XAMPP.
5. Test your work here.
6. Close the browser, and stop the XAMPP web server.

When the invaliddatatest.html form first appears, the age data field will be empty and colored green. If you use the spinner icons on the right side of the text box, the numbers will start at 18, and the text box will stay green. However, if you try to manually enter an age less than 18, the text box immediately turns red.