Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the most important events for validating and processing forms, is the onchange event. It triggers when the content of a form element changes. This is different than onfocus and onblur, which fire when a field goes in and out of focus. With validation, sometimes you'll need to use different types of events, so it's nice to know that these can work well together. Let's take a look at how we can use these events for validation. So I have a simple form and it just has a URL field. I want to make sure that if I have a URL, that at least it starts with an http://.
So I'm going to be using the onchange method, and here's my HTML. Can see that I've placed a span right here to accept errors for validation. So I'm going to stat by creating a script tag. And in my script bag, I'm going to target the My URL field. So, I'll do document, the form, then get to the My URL field and then add the onchange handler. This is going to execute a function literal, which means just a function without a name. And I'm going to go ahead and comment this right here. Onchange. because, a lot of times you can have some of these curly brackets all over the place, and it's nice to be able to see what they belong to. So, next, I'm going to create a variable to hold the value of our field. It will be a variable, it's going to be called the URL. It's going to be equal to the field value.
So if it finds that the text http:// is not in the URL field, then I'm going to output an error. I'll set the inner HTML to some text. So let's check out our form now. I'm going to refresh my page, and I'm going to try to type in a URL without the http field. So now I get an error that says, URLs must begin with http://. So that works well, but somebody could type on our field and then tap out of the field. We just refresh the page, somebody could tap in here and then just tap out of it, and not place a URL. Let's make sure that if they focus on this field without filling out what we need, then they'll get a message.
We'll use the onblur function for that. I'm going to copy this line right here, because the call is going to be pretty much the same, but we're just going to call the onblur function. We'll add a comment, and let's add another comment right here as well. So, we'll check to see if the value of the My URL field's empty, and will send a different error. So let's go back to the form and I'll refresh, and I'll try tapping into the field and then tapping out. Now it tells me that the URL field is required.
And if I try to type in something like go.com, it says that URL must begin with an http. So, so far this form is a little like a bad roommate that's always complaining about stuff, but doesn't really want to help out. So, let's help the user out by adding the http:// if they forget to put it in. So we'll add that right here, so I going to save this and go back into my form, and I'll refresh it. And now if somebody puts in something like go.com and hits Tab, it's actually going to complain about it, but it's going to help them out and put it in there as well. You may want to get rid of this complaining, that's up to you. There's a possibility now that when somebody comes in here, they'll just tap out of it and they'll try to submit an http field without a value in it. So let's see if we can fix that, we'll add something to our onblur event handler.
So I'm going to copy this part right here and paste it, and then I'll just check for just the http by itself. And I'll say here please add a valid URL. So I'm sure you're thinking, there's still probably a thousand ways of breaking this form. And who knows if the rest of the URL is even correct. So they can type a URL that doesn't have a .com or, or some other sort of weird URL problem. The important thing is to remember to use the techniques we've used here, for your own validation needs. Try to help the user be more accurate by providing messages and hints, helps them be happier when they're filling out your forms.
Get unlimited access to all courses for just $25/month.Become a member