Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When the user submits the form, the browser fires an onsubmit event. Your page can capture that event and prevent the form from being submitted. That way, you can form your own validation, and if necessary add HTML5 functionality to older browsers. So let's see how we can add something like this our form. Here's our form so far. Right now, if I try to send this form, the HTML5 validation will take over. I need to make that work for older browsers. To do that, I'm going to go into my form, and in my HTML document, I'm going to remove the required attributes from both the name as well as the email fields.
Return false is what's going to prevent the form from submitting. So I'm going to hit Save, go back into my form, refresh. And I'm going to hit the Send button now. And you'll see that the alert comes up, and the form doesn't submit. So even if I type in something in here, hit send. The alert comes up, the form does not submit. My info's still there. So that's all well and good, but we need to add the HTML5 required field functionality into this form for older browsers. So I'll switch back into my script, and I'm going to modify the validation info object.
Right now, it has two fields, my name and my telephone. And the field that I want to modify first is the myName field. I'm going to add a required object here, and I'm going to set this to true. That way, it'll make sure that I validate that field. I'm also going to add a myEmail object here, and set the required field here to true as well. So now that I've done that, I can work on my onsubmit function. I'm going to move the myError variable, which right now is in the input field validation, to the very top, so it's a variable that's accessible to both of our functions.
So I'm going to cut it out of here, and I'm going to put it right up here, next to input fields. So when somebody submits the form, I want to go through all of the elements in my validation info object. And check to see if there's any fields that are required. In this case, my name and my email. So I'll use the for loop, and check for key in validation info. And here, I'm going to create a variable called myField. And that variable is going to be set to the document. And get element by ID.
Then I'll use the key from this for loop here. That'll go through each one of the individual objects in my validation info object. Next, I'm going to check to see if the current validation object has a required element. And also, if my current field, the one that I'm testing, is false or true. So, if the validation objects' key, the current key as we go through this loop, has a required field. And if there is an element, which we stored into this variable called myField. And that element has a value that's empty, then I'm going to do the following.
I'm going to set the error message for the page, I've already done that down here, so I'm just going to copy this line, and paste it right here. And I will change that error to read required field. Then I'll use the key, which the name of the input field, and then I'll add not filled. To help out the user, I'll position the insertion point in whichever field I'm talking about. You could do that with the select method.
And then we'll return false, because we don't want the form to process. If none of the required fields are empty, then I'm going to return true. And the form will submit as usual. Looking at this code, it looks like I need to make sure that I add a double equal sign instead of a single equal. A double equal is a comparison operator. A single equal is an assignment operator. So that needs to be done like that. And I'm going to save this, and I'll switch back onto my form. Refresh it, and I'm going to try to submit the form, and it's going to give me an error right here.
If I do fill out this field, and I try to submit, it'll tell me that the email was not filled, and it'll put the cursor at that spot. So that's working pretty well. Now, I need to go ahead and turn on HTML5 validation for this form, and then use modernizr to make sure that this is going to work in older browsers. So, I'll switch back onto my form, and right over here, I'm going to add an if statement. And what I need to check is that if the modernizr object does not have the required variable in it, then it's going to perform everything in here.
By capturing the onsubmit event, we can perform our own validation, and also make up for some of the missing HTML5 attributes in older browsers.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99387 Viewers
56 Video lessons · 112632 Viewers
71 Video lessons · 81462 Viewers
131 Video lessons · 39108 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.