If you want to take your website to the next level, the ability to incorporate interactivity is a must. But adding some of these types of capabilities requires a stronger programming language than HTML5 or CSS3, and JavaScript can provide just what you need. With just a basic understanding of the language, you can create a page that will react to common events such as page loads, mouse clicks & movements, and even keyboard input. This course will introduce you to the basics of the JavaScript language. We will cover concepts such as variables, looping, functions, and even a little bit about debugging tools. You will understand how the Document Object Model (DOM) is used by JavaScript to identify and modify specific parts of your page. After the course, learners will be able to react to DOM Events and dynamically alter the contents and style of their page. The class will culminate in a final project - the creation of an interactive HTML5 form that accepts and verifies input. This is the third course in the Web Design For Everybody specialization. A basic understanding of HTML and CSS is expected when you enroll in this class. Additional courses focus on enhancing the styling with responsive design and completing a capstone project.
Comparing Two Inputs
Loading...
From the course by University of Michigan
Interactivity with JavaScript
2411 ratings
University of Michigan
2411 ratings
Course 3 of 5 in the Specialization Web Design for Everybody (Basics of Web Development and Coding)
From the lesson
Week Four: Validating Form Data
This week we will put a number of the concepts from this course together to tackle a new project - creating and validating input entered into an HTML5 form. Forms are extremely common elements used to input and send data to via a webpage. We will look at how you can use JavaScript to add options to your forms, to pre-fill data based on previous input, and even to check that passwords match.
Meet the Instructors
Colleen van Lent, Ph.D.Lecturer
School of Information
Charles SeveranceAssociate Professor
School of Information
Hi everybody.
We've seen how to use HTML five, attributes, and
input types to really try to validate the inputs people can put into their forms,
but that's not always gonna be enough.
One, we've seen that a lot of browsers don't support all these types, so
you can't always depend on them.
But two, there may be situations that go beyond what these tags and
attributes can do for you.
So, in this video, we're going to do an example
where we want to check that the two email addresses that are input Match exactly.
So let's go ahead and see how we're going to do that.
One of the things I mentioned is right from the start,
you wanna think about what exactly is it you're trying to validate.
In this case, we're trying to compare that two emails are the same.
How are we going to do that?
Well, it's going to be a little bit more complex.
We'll start with the HTML.
We can use the email input type and
the required attribute to kind of get us started.
But then we want to add some JavaScript.
And that JavaScript is going to be in charge of making sure
those values are actually the same.
The last question that we didn't think about before,
is when do we want to do this?
We're going to use these API events that are linked to the DOM
to decide when we should run our JavaScript.
In this case, lets go ahead and validate as soon as that second email is entered.
So we decided we want to validate at input time, but
that still doesn't tell us which event we want to use.
Two options are oninput and onchange.
Either one of them will react every time you type into the email form.
But oninput is going to check every single time you type in a character, and
we probably don't want that.
We want instead to use onchange because that will wait until we're
done typing in the email address and have hit tab or enter to leave that field.
Okay.
After we decide which event to trigger on,
we need to decide what is it we're going to compare.
Because in JavaScript, when we talk about the different elements,
it rarely is that it's as simple as just some text.
So, is it the inputs that you wanna compare, or
some attribute of those email inputs?
Finally, what's our output, what is our goal?
We need to let the user know.
And communicate the result of when we did our check.
So here's our kind of goal.
This is what we wanna look for.
I have a field that has two email input types one and two.
And right here they don't match.
When they don't match I'm gonna generate a java script alert
that let's the user know, no we really need them to be the same.
So, let's look at the actual code.
All right, so on our left here we have the HTML code that we need.
I just have my two input types.
They're both email.
And I included my required.
What's different is that on my second email type,
the one that matches down here, I have an on change equals check.
This is responsible for calling the JavaScript code that's going to say hey,
I need to make sure these two things match.
The other thing that's really important about this HTML code is
that I've included IDs.
So I have ID equals email address and ID equals email repeat.
This is how JavaScript is going to identify who's who.
Alright.
Now let's switch over to the JavaScript code.
I'm going to take a few extra steps just to try to make everything clear.
I've created two variables.
Email one and email two.
And I used document.getelementbyid in order to grab those values.
If by any chance you've reached this point and
you don't follow what's going on with these two lines of code, I
actually recommend that you stop, go back, and review some of the earlier things.
If you are okay with this idea, great, let's move on.
Your first stop might be, we need to compare email one to email two, and
then we'll know.
Not exactly.
You have to remember that when JavaScript makes the DOM,
this maybe email one and this maybe email two,
but it's not the whole node we wanna compare, right?
We don't care about background colors or things like that.
What we care about are the actual values.
That are stored in email one and email two.
So we have this line of code.
If email one doesn't equal email two, then go ahead and
send up that alert that says, hey the two emails must match.
Let's see if it works.
I have me and me.com.
I'm gonna put in me at me2.com.
As soon as I'm about to tab out of here, I'm hoping to see my JavaScript alert.
Great, it worked.
It said the two emails must match.
Before I go any further, I'm gonna do the smart thing, and
make sure I don't always get that alert.
Tab out.
Great, it didn't happen, Now, this works exactly the way we planned it out to work.
But that doesn't mean we planned it out the right away.
I'm gonna click on confirm emails now.
And you can see that it let me get away with that.
So let's think about what we need to change.
When you check on inputs, it can be the case that, while everything's worked,
it didn't really have what I call teeth.
It didn't make anything happen.
So how can we actually stop the form from being submitted
if the values aren't correct?
Well, we need to rethink our plan.
The what was okay.
The how was okay.
And the when was kind of okay, but we wanna add a second way to do this as well.
We also want to check on the submit.
So let's look at that code.
In the new version of our code, I've added something to the submit button.
I went in and I added a onclick="return check();".
So there's something new that you haven't seen before.
It's the idea of the return value.
And it says hey, don't just run this function,
I need to know did it return true or false.
Then, I went over here and I added an additional line of code to our JavaScript.
It says go ahead check all the same things and still do that alert, but
in addition, after the person hits okay I need you to return false.
So for you only to be returning things two times, we'll run this function
it'll go through says they didn't match, I'm gonna return the word false over here.
[SOUND] And whenever input type sees a false it knows I've gotta stop.
I'm not allowed to do what it is I'm trying to do.
So let's take a look if this works.
I have the me and the me two.
And, now, when I try to confirm, it won't let me.
It won't let you hit that submit button until you get it right.
So what is return?
It's something we're gonna get into in a future lecture, but for
right now you just need to know that every function can return values.
Whether they're Numbers, Strings, Booleans, Objects, Arrays.
When we do form submission, we tend to stick with the Boolean,
where we're saying, you know what?
We need to stop this.
And when we do that, it's going to stop whether it's a submit, or a link, or
any type of HTML five tag that has an action associated with it.
So I hope from this lecture you got the general idea that it's more than
just knowing how to code, you have to be careful about what you're comparing and
when you're comparing it.
Even though it can be tricky, JavaScript is still a great tool for
verifying the input.
And, it's a great language to know,
no matter what you're doing on that front end development.
But really what you need to make sure you're doing is creating the most basic
forms before you go in and try to add this JavaScript interactivity.
It's going to make your life much easier and it's always gonna create better,
cleaner code.
Thanks.
Explore our Catalog
Join for free and get personalized recommendations, updates and offers.
Coursera provides universal access to the world’s best education,
partnering with top universities and organizations to offer courses online.
© 2018 Coursera Inc. All rights reserved.
