Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
And let's take a look at the telephone field. You can see that I've already used that pattern. Right here. So, I'm going to put that into my script. Before I can use it, though, I need to escape some of these digit fields. The search function expects a pattern as a string. So, if we submit the pattern like this, it's not going to work. We're going to need to add slashes to everything that already has a slash in this pattern. Now we can start creating the onchange function. So, I'm targeting myField, which is targeting the document.theform.telephone.
And I'm going to add an onchange handler, that will look for that event, as soon as it happens. So, now I'm going to create a variable for the pattern, and I'm going to set that variable to be a new regular expression. And into that regular expression, I'm going to pass my pattern. So, I'm going to grab it from right here, and go to my regular expression, and in quotes, paste the pattern in. And then I'm going to add a comma and then the keyword i, which just means that this search will be a case insensitive search.
Doesn't necessarily matter for phones, but it's a good thing to have for any kind of pattern so we'll leave it like that. Now, I'm going to create a variable and it's going to be called isValid. And that value is going to implement the search function. So, what we want to do is search for this, this is going to be myField, it's going to be the same as myField. So, I'm going to ask the myField value to execute the search function and into that I'm going to pass the pattern that I just created, myPattern. And I'm going to check to see if this pattern is greater than or equal to zero. The reason for that is that, search will look for the pattern in some text, in this case it's going to look for the pattern inside this value, which is the myField value, which is targeting this telephone.
So, if the pattern matches then we can output something to the screen. So now I'm going to do a check for, is the pattern not valid, right, so that's what this says right here. Is the pattern valid? And if it's not valid, then we're going to do something and if it is valid we're going to do something else. So, just sort of we can remember pattern not valid, adding a comment here, so pattern is valid.
And what we'll do is, we'll target the field myError which right now it's pointing to the element with an ID form error. And we'll get the inner HTML of that field, and then make it equal to some text. INput does not match expected pattern. And we'll put in the pattern that we expect here so the user can read it. Now, if the pattern is valid, then it's just going to clear out this field. We'll just make it blank like this.
And then, I'm going to save this file. I could probably use another comment right here. One more thing I have to do is, I have to make sure that this IF part is actually within the onchange handler. So, I'm going to go and put that in here. Let me space it out a little better as well. Tab it in, and now it'll do this validation check after the field has changed. So, I'm going to save this and switch back over to my browser. Make sure I refresh my page. And if I go to the phone field and try to type something other than a phone. Notice that I get "the input that not's match expected pattern text" that I typed in there.
If I do type a phone, type in something in the correct format and I hit tab, that goes away. So, now that we're able to give feedback to the user not just on submit, but also during completion, it seems like the form is a little more user-friendly and helpful. There's a few ways we could probably improve on the script and make it more generic so that we can use it in other input fields. We'll tackle that on the next movie.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104534 Viewers
56 Video lessons · 116451 Viewers
71 Video lessons · 85665 Viewers
131 Video lessons · 41003 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.