New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Detecting the onchange event

From: Validating and Processing Forms with JavaScript and PHP

Video: Detecting the onchange event

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://.

Detecting the onchange event

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.

To check if a piece of text is part of another string, we can use regular expressions, or a special JavaScript function called indexOf. We covered regular expressions in the movie on constraining with regular expression patterns, but we're going to cover them again soon. So for now, we'll just use the indexOf function. The indexOf function returns the position of some text inside of some other text. If it doesn't find the text, then it returns a negative one. And that's perfect for us, so we'll use it in an IF statement.

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.

Show transcript

This video is part of

Image for Validating and Processing Forms with JavaScript and PHP
 
Expand all | Collapse all
  1. 3m 36s
    1. Welcome
      1m 9s
    2. What you should know
      1m 2s
    3. Using the exercise files
      1m 25s
  2. 12m 50s
    1. Understanding forms
      2m 2s
    2. Working with form fields
      7m 4s
    3. Using the form tag
      3m 44s
  3. 19m 23s
    1. Using input validation
      2m 10s
    2. Adding required fields and placeholders
      1m 31s
    3. Constraining numeric and date fields
      2m 32s
    4. Accepting multiple entries
      1m 41s
    5. Limiting uploads by MIME types
      2m 35s
    6. Assisting text input with a datalist
      1m 55s
    7. Constraining with regular expression patterns
      6m 59s
  4. 42m 13s
    1. Accessing forms
      3m 57s
    2. Looking up form elements
      3m 35s
    3. Handling focus changes
      2m 47s
    4. Detecting the onchange event
      4m 31s
    5. Using the selectedIndex property
      2m 30s
    6. Dynamic validation with regular expressions
      7m 0s
    7. Creating a generic input validation function
      4m 31s
    8. Validating in older browsers with Modernizr
      7m 32s
    9. Interrupting form submission with onsubmit
      5m 50s
  5. 15m 20s
    1. Understanding jQuery
      3m 47s
    2. Validating on submit with jQuery
      3m 45s
    3. Building interactive jQuery validation
      2m 34s
    4. Using the jQuery Validation plugin
      5m 14s
  6. 32m 57s
    1. Communicating with PHP servers
      2m 27s
    2. Retrieving data from superglobals
      8m 18s
    3. Using server-side validation
      4m 59s
    4. Adding in-page validation
      5m 22s
    5. Mirroring input data back to the user
      7m 46s
    6. Sanitizing form input
      4m 5s
  7. 43m 29s
    1. Mailing form data
      8m 28s
    2. Understanding file uploads
      3m 1s
    3. Uploading files
      9m 20s
    4. Processing form data with AJAX
      8m 14s
    5. Preparing your database
      5m 50s
    6. Pushing data
      8m 36s
  8. 1m 17s
    1. Next steps
      1m 17s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.