Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last movie, we added dynamic validation to our form with regular expressions, so we can give the users some feedback while they're typing out in the form. So if I come over here and I try to type in something other than a telephone number. And when I hit the tab key, it says input does not match expected pattern. This works fine, but we could make it be a lot more efficient, and also easily make it work with any of our other input fields. So, let's take a look at how we can take this concept. And generalize it to work with a range of fields.
So we can replace all this with just the text, this.pattern. Remember that this right now happens to be related to my field. And my field is linked to my form and the telephone input field within that form. So since we're reading the pattern what we can also do is read the place holder field. So we'll create another variable, I'll just copy and paste this one. This one will be called my placeholder. And it's going to read the pattern placeholder field. Now that we have the pattern and the placeholder, we can change our text right here, so that instead of physically putting the input field's placeholder, we can just add it by adding a plus sign here and then saying, my placeholder. So if I save this and I go back into my form, I'm going to refresh the page, and try the same thing, you'll notice that it's working exactly like before, but the way we get the information is a lot different.
And that's going to be equal to document, the form, and I'm going to get elements by tag name. And just get all the input fields fed into an array. So now what we need to do is find a way of executing all this code for every single one of those input fields. To do that, I'm going to use the For function. So it's going to look like this. For, then I'm going to add a key here, in input fields. And then, it's going to execute the code within these curly brackets in sequence. So we can grab all this code, cut it out of here, and just paste it right in here. Now, I'm going to go ahead and indent so it is easier to read. And I'll make sure I'll add a comment right here. And now all we need to do is modify, the my field variable, so that instead of looking for just the telephone, it's going to go through each one of these input fields.
That looks like this, I'll type input fields, and then, I'll pass it along the key, and now it's going to go through every one of those input fields in a loop, and attach an on change handler to each one of them. And in each of those, it's going to look for the pattern that is in the pattern attribute, and it's going to put the placeholder in the placeholder attribute. Let's go ahead and save that and see what happens in the form. So check here, I'm going to refresh this page. And let's test out the telephone again. Type something that's not a telephone. And it tells you that the input does not match expected pattern, that's what it was doing before. Now let's try typing in something else, like a name. So the name expects the pattern to be last name comma first, so I'll just type something in there.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99373 Viewers
56 Video lessons · 112631 Viewers
71 Video lessons · 81455 Viewers
131 Video lessons · 39104 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.