Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I verify that this is what happens, on a real IE 8 browser. And it's one of the problems that comes up, when working with older browsers. It doesn't really make any sense, for the pattern attribute to be recognized in IE 8, but not on the newer IE 9. This is a definitely a problem, that we're going to need to address. So, in order to fix that, I'm going to use a library called modernizer. modernizer let's you look for feature support in different browsers. We can use it to detect whether or not a browser has support for patterns, and placeholder attributes, and then add some backup validation for those. It's super easy to use and install.
So, from the Home page, if you just want to play around with it, you can click on Download This Development Version. But notice it's 42k, and we don't need the whole library, we just need the part that deals with forms. So, if you click on Download, you can figure your Own Build, and customize how the library will get downloaded. We really don't need very much, so I'll click these Off right here. And I'll make sure that I have the part of the library that checks for input attributes, and input types only.
So, what I'm going to do here is, create an Object called Validation Info. It's going to be in a new variable. This Object is going to have information, that's going to be similar to the information already on the form. So, I'm going to go here and type in my name, that'll create a My Name Object, and that will have another Object inside it. And in here I'll type in pattern, and place a pattern for the name field. Then I'm going to use another item called a Placeholder, and this will have the text for my Placeholder. So, we need to get this pattern.
I'm going to go back into my index, that HTML file, and I'll find the area with the name and Copy the pattern from right here. So, I'll Copy this, go back to my Script, and Paste that right there. And now I'm going to add another Object, so the things that I want to validate on this form, are gong to be my name, as well as my telephone. My telephone is going to have a different pattern, and a different Placeholder. And I'll go back into my index, that HTML file, and I'll Copy the pattern from here as well. Now I need to go ahead and Escape the slashes, so I'll just type in double slashes, for all the single slashes here, to fix my pattern. Now, right now, here's the part of the code where I'm checking for a pattern, as well as a Placeholder, that are coming right now from the input fields in my form.
I need to Modify that, and use that, only when the pattern attribute is available to the browser. So, this is where I need to use modernizer. modernizer creates an object called modernizer, that has information about each type of thing, that you're trying to check for. So, what we need to do here is create an If statement, check the modernizer object, for input field in pattern. So, if the modernizer object has a pattern field in the input object, than I can do something, and what that's going to be is, what I was doing before. This is what the browser will use when there's normal pattern support. Otherwise, I need to do something else, and this is where my object comes in. It's going to be pretty much what I did before, except that instead of using this pattern, it's going to use my object that I created up here, called Validation Info.
And I'm going to pass it, my name or the name of the current field, remember, this is a loop that goes through all the fields in the form. So, this should say this, dot name, an then it's going to look for a pattern. And that pattern would be this field right here, or this field right here, as it goes through the form. And then for Placeholder, it's pretty much going to be like this, except it's going to look for the Placeholder object.
The rest of the Script is going to be pretty much the same. Here I am back on Internet Explorer 9, but I'm still running on IE 8 mode. So, let's switch over to IE 9 mode. I'll go to Browser mode here, and select IE 9. Make sure that my document mode is also in IE 9 standards. And I'm going to see if my changes work. And sure enough, adding modernizer has made it possible for our form, to understand our validation even in IE9, which wasn't supporting the Placeholder standard before. So, I'm going to go ahead and Save this, and this should be working now, in old versions of Internet Explorer, namely, Internet Explorer 9. So, old versions of IE require a little special tender loving care. modernizer makes it easy to detect for shortcomings, in older browsers, so that we can write code, that is more compatible and accessible, to a larger part of the net population.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101850 Viewers
61 Video lessons · 88602 Viewers
71 Video lessons · 72417 Viewers
56 Video lessons · 104112 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.