Have simplified in today's video.

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.

Let's get started now to get started.

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 have exclamation point and enter.

It's going to generate our form for us.

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.

We're gonna create a label here.

What?

You're going to be four.

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.

D.

Of name is gonna have a name of name.

Here we go.

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

Close that off.

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.

And lastly, let's add a submit button.

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.

We're gonna give it an I d.

Here, which is air.

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

And this was gonna be blank for now.

Now it's created new page here.

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.

Yes, and every go.

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.

There we go.

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.

Don't get element by i d.

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 could just take our e here.

Hopes he can we go now.

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.

So let's create a variable here.

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

And now let's check for our first air.

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.

So we're gonna save messages dot Push.

We just want to say Maine is required.

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.

So it was create another variable here.

There's gonna be air element.

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 want to set the inner text here.

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.

Now we click.

Submit.

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.

So it was come down here.

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.

So we could just say messages.

Stop pushed password must be longer than six characters.

There we go.

Now.

If we try to submit this.

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.

And now we come to be exact same thing.

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.

Lastly, let's add one more validation in here so we can say, if our password password that value is equal to password, then we want to throw in error, telling the user that they can't set their password password, so we'll just say messages dot push password.

It cannot be password.

And now, if I type in a password here, putting in some kind of name clicks a bit, you see, I get password cannot be password.

But as soon as I make it something other than password, it'll go through just fine.

And that's all there is the Java script for invalidation.

If you want to see more videos of me simple, find the Web.

Make sure to check them out over here and also subscribe to the channel for more videos like this.

Thank you very much for washing and have a good day.