Name: JavaScript Form Validation
Uploaded: 2020-04-04T06:27:47.000Z
Duration: 6 min 39 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Modal verbs - A2

We're gonna take a look at Java script form validation so you can give your users nice error messages anytime they mess up their form inputs.

And if it's your first time on the channel, make sure to subscribe for more videos where I simplify the web for you.

I just have a blank visual studio code project we're gonna create index dot html which is going to contain all of our form information.

We just set the title here to be form and instead of our body, we're just gonna create a generic log in form and we're just gonna sit here.

The action is just going to go to our current euro and we're gonna set the method here equal to get You could just leave these out because these are the default values.

But I like to be explicit next, inside of our form, we're gonna create a label first, actually is credited so they're content is going to be on new lines.

Our name and we're gonna create an input.

Make sure we actually set this as our name for the label.

So we know what it is, and we're gonna create an input here, and this is going to have an I.

And we want to make sure the type is equal to text here.

And let's say that opened it up using live server.

And as you can see, we have our input here, which is perfect.

Now it's copy this down and do the exact same thing.

We're gonna do this for a password, so we're gonna give an idea of password.

We want to give it a name of password type of password.

And let's make sure label here is also set up properly.

So we're going to say it's button here with a type of submit and of course, the text submit.

And now we have our form here and we can submit it and you can see our information is going through now with that out of the way.

Let's actually set up here a div which is going to contain our error message.

So we know this is where a message is going to go every go close that off.

We're gonna be script dot Js And let's make sure we include that in art index page here at the very top.

We can just defer this so it loads after our body and we can set the source here to be script out.

And if you're confused by any of this form syntax for input syntax, make sure check on my HTML forms video rock over everything you need to know about forms and the input element inside of HT mouth.

Now moving under a script of Js here, let's actually go in here and select our different inputs.

So the first thing that we're gonna have is we're gonna have an input, which is going to be our name input.

So she's gonna be equal to document dying, get elements by i d of name do the same as Xing, but we wanted to this for a password.

And we're also gonna put an I D on our form so we could select this was going to say form Save that.

And instead of here, we're gonna say our form is going to be equal to document.

And it's gonna be an i d of form now in order to actually catch these airs before they get submitted.

Because by default we click submit that automatically refreshes are page.

So we need to do is we need to add an event listener onto our form and we just want to add thes submit event listener and inside of here in order to cancel out our forms from submitting.

We can just say ee dot prevent default and this is going to prevent our page from submitting.

And now when we click submit, you see, that doesn't actually submit our page, which is perfect.

But we only want to do this if we have errors.

We're just gonna say messages and this is going to be equal to all of our air messages.

Our first error is gonna be if our name dot value is equal to an empty string or if our name dot value is equal to know this means the user's did not pass in any name.

So we want to make sure we send a message.

And then down here, we could just check to see if messages dot length is greater than zero.

This means that we have some form of error, which means we want to prevent the actual form from submitted.

And we want to send these errors to our air.

We set this equal to document that get element by i d.

And this is just an I d error that we said earlier.

And now what we want to do is we can kick our era moment.

We're gonna take our messages and we want to join each one of these by a comma, so they're all separated from each other.

Now we can say that and assumes we click submit.

You're going to see we could never measures, but says name is required because we didn't put a name.

But if we do put a name and click submit, you see, it's actually gonna submit our form for us and show no error messages, which is perfect.

But we actually don't need javascript to check if the name is required.

We can do this inside of our input element.

Here are just putting a single required field.

You see this as police follow this field and has taken care for us by the browser.

But, for example, this password is going to have different requirements that we may want to check in the Java script.

We could just say if password dot length is less than or equal to six, we want to say that the password must be longer than that.

Stop pushed password must be longer than six characters.

After we put in your name, you'll notice that it actually goes through.

And that's because we need to make sure we check the value here so we'll say, valued at length.

And now if we put in her name, Click submit, you'll see.

That said, the password must be longer than six characters, and if we make it longer and click submit, it'll go through.

We can also do other things, such as checking to make sure the password is not too long.

So we can say if the pastor dot link is greater than or equal to 20.

We consider the password must be less than 20 characters.

If we submit after it put a name you see, it must be longer than six.

But if we make our password incredibly long and click submit, you see it must be less than 20 characters.