The easiest way to add validation to your existing form is to take advantage of the new HTML5 input types. Some new browsers like Google Chrome will automatically verify that data in this input fields won't submit unless they're in the right format. So take a look at this form. It has several input fields that look like normal text fields, but if I try to submit data in the email field that is not an email. The browser will throw a pop-up that tells me the data in the field is not valid. If I look at the code for this page, you can see that all I have done is change the input type for the second field, to email.
That's it. The browser will automatically perform this validation for us. I've done the same thing for some of the other input fields, like URL, number, and date, time. So if I go back to the form, and I try to type in a, website that is not an URL, and submit the form, it tells me to please enter a valid URL. The same thing will happen with some of these other fields. So the advantage to this type of validation is that it works automatically by just using the right input types. The disadvantage is that it doesn't work in older browsers, and the implementation is up to the browser manufacturers.
So it's not consistent, and you shouldn't rely on it. Using this type of validation has some additional advantages. So, for example, if you pull this form up on a phone, the fields will also take advantage of some of the custom key words available to your device. So if I click on the email field, you'll see that I get a keyboard with the at sign. If I click on the website field, I get a keyboard that has a slash and a dot com. If I click on the h field, which is a number field, I get the keyboard with the numbers at the top. And if I click on the field for the date and time. I get a custom date and time picker.
Here's a page with a list of all the current HTML5 input fields. By the way, if you are wondering how I styled this form, make sure you check out my course on CSS Styling Forms. HTML5 input types are something you should be using on all of your forms. It's a quick way to get simple validation virtually for free. And it's backwards compatible with older browsers, which will simply show a text field.
- Understanding forms
- Adding required fields and placeholders
- Accepting multiple entries
- Limiting uploads
- Handling focus changes
- Validating with regular expressions
- Working with older browsers
- Building jQuery validation
- Using server-side validation
- Sanitizing form input
- Uploading files
- Sending form data to a database