Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,974 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Intermediate
HTML5 input fields have a super cool attribute called Pattern, which you can use inside fields to check the user's input against a specific set of characters. Inside this attribute, you define a string that prevents the form from submitting unless the text in the input field matches the pattern. The language we use to format our string is called a regular expression. And they're common to a variety of programming languages. Let's take a look at how this works. I have a very simple form here with a single field that expects you to type in a correct pattern.
So let's go to the code for this. And I'm going to add the Pattern attribute to this field. Now I'm going to add some literal text here. Texas and save this. Go back into my form, make sure I refresh, and I'm going to try to type something into the form. I'll try California. And when I hit Enter, I get a popup that says to please match the requested format. So I'm going to try typing Texas now and hit Enter. You see that I still get please match the requested format because when I typed it into pattern, I typed in a capital T. So when I type a capital T it works just fine.
Now that's not particularly useful but it gives you the idea that the patterns expect the text to match. To create regular expression patterns you use regular characters combined with special characters. For example the period means match any character. So if we replace the capital T with a period, I'm going to save, come back here, refresh, and I'll try typing in lower case Texas this time, and that works just fine. If I type in upper case Texas, that works, too. But now I can type something in like Lexus, and that'll be acceptable as well, and that's not necessarily what we want.
You can ask for a specific series of characters together by placing them within brackets. So, if we wanted to match Texas, upper or lowercase, you can type in something like, brackets, and then capital T, lowercase T, and that will accept either lowercase Texas or uppercase Texas. So, I'll save, come back here, and now I can type in Texas, capital Texas, but not Lexus, and that's exactly what we want. You can also create a range. So let's say you're looking for a single lower case alphabetical character.
You do that using a range. So, let's try typing in lower case A, then the dash, and then Z right here. I'll save this and go back into my form. Now I can type in any character, I'll try K, that works pretty well. I can try typing the A. Now, let's try an upper case character, like T, and it doesn't like that. It also doesn't let me do more than one character, just a single character. It's not necessarily good. If you wanted to match one or more characters you could do something like this, just put a plus sign at the end of the pattern and then it will take one or more of this particular sequence. So save that and I'll refresh, and now I can type in multiple lower case characters but not any upper case characters in that sequence. So, what if you wanted upper case letters too.
Well, we could put in more than one sequence of characters as well. So, you could say something like, capital A through Z and then lower case A through Z. So let's try that. Come over here, and refresh, and try, and this works well, for any combination of upper and lowercase characters. Now, what if we wanted numbers? Well, that would work by adding, of course, a number range, like zero through nine. So save it, come back here, refresh. And now we could do any number of upper case, lower case characters or numbers. Now it's not going to accept spaces in our pattern. So, we could do that just by adding a space to the pattern. So just enter space right there.
Save it. Refresh. And that works just fine. That's pretty cool, but what if you wanted to ask for a specific number of characters? Perhaps something like a zip code. You could ask for a certain amount of characters with curly brackets. So let's try that. We'll do zero through nine, and instead of the plus sign we'll use curly brackets and a number. So we'll say we want five digits from zero to nine. So I'll save that. I'll try typing in here, refresh one, two, three.
That doesn't work, but I do one, two, three, four, five and it takes it just fine. So, that would be perfect for matching a zip code. There's a shortcut for numbers, so that could be written instead of like this, like this. That means a digit five times. So, if you wanted to do something like a zip plus four code pattern it would look something like this. Notice then when I'm using the dash I need to escape it with the slash right before it. So I need a series of five numbers followed by a dash, followed by another number, four times. So let me save that, refresh and.
We trying typing in some numbers here. That's not going to work. So it should be something like five numbers, dash, four numbers, and then it will work. This is obviously getting super exciting and complicated at the same time. Now I could spend a whole course explaining all the rules of regular expressions, thankfully somebody's already done that. You can check out our course on using regular expressions at this page. There's also a whole bunch of really cool resources you can find online related to regular expressions.
For example, here's a really good cheat sheet with a quick explanation of the patterns. If you want to build out and test your regular expressions, you can use this online tool called, Regexpal. Finally, this website has a number of pre-built HTML 5 patterns you can use for common tasks. So let's take a look at postal codes. And you can see that I got pretty close to it, however, with postal codes you can ask for either a five digit number or alternatively, a five digit number with a dash, and the four digit number.
So, if we want to use this pattern for American Postal Codes, you just double-click, copy it, and bring it back here, and paste this right here. Make sure you get rid of that carriage return, and save it. Come back here. Refresh and we'll try some different things. So I'll just try three numbers, that doesn't work. Five numbers works and, five numbers plus the dash, and four numbers works as well.