Start learning with our library of video tutorials taught by experts. Get started

Validating and Processing Forms with JavaScript and PHP

Detecting the onchange event


From:

Validating and Processing Forms with JavaScript and PHP

with Ray Villalobos

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

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Validating and Processing Forms with JavaScript and PHP
2h 51m Intermediate Apr 23, 2013

Viewers: in countries Watching now:

Validating web forms is a critical skill for any web developer, ensuring that the data that's submitted is complete, accurate, and nonmalicious before it's sent off to the server. Join author Ray Villalobos in this course as he shows how to validate input from site visitors with HTML5, JavaScript, and jQuery and then process the data with PHP. Plus, learn how to email form data and save it in a MySQL database so that it's ready for other applications.

Topics include:
  • Understanding forms
  • Adding required fields and placeholders
  • Accepting multiple entries
  • Limiting uploads
  • Handling focus changes
  • Validating with regular expressions
  • Working with older browsers
  • Building jQuery validation
  • Using server-side validation
  • Sanitizing form input
  • Uploading files
  • Sending form data to a database
Subjects:
Developer Web Web Design Databases Web Development
Software:
JavaScript PHP
Author:
Ray Villalobos

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.

There are currently no FAQs about Validating and Processing Forms with JavaScript and PHP.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Validating and Processing Forms with JavaScript and PHP.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

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