Watching:

How to Use Input Validation in JavaScript and PHP Forms


show more Using input validation provides you with in-depth training on Developer. Taught by Ray Villalobos as part of the Validating and Processing Forms with JavaScript and PHP show less
please wait ...

Using input validation

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.

Using input validation
Video duration: 2m 10s 2h 51m Intermediate

Viewers:

Using input validation provides you with in-depth training on Developer. Taught by Ray Villalobos as part of the Validating and Processing Forms with JavaScript and PHP

Subjects:
Developer Web
Software:
JavaScript PHP
Author:
please wait ...