Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 103154 Viewers
61 Video lessons · 89835 Viewers
71 Video lessons · 73452 Viewers
56 Video lessons · 105000 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.