So in this video we're going to focus on aged him a five form validations so validations referred to
the ability to enforce rules and structure on different parts of a form so we can say that you cannot
leave your email blank or your password must be greater than 10 characters or your email must follow
a valid email syntax.
So these validations are something that we're going to keep learning a lot about.
We will do validations for javascript will do validations on the backend.
Today we're just going to learn about the simple validations we can do with just plain aged him out
.
So these are not going to be insanely complicated.
We can't do anything really custom.
So we might want down the line to do a custom validation to make sure that somebody's phone number follows
the exact correct format or we have an area code.
Dash 3 numbers dash for numbers we can't really do that with just h t m l But what we can do is two
different things.
We can check to make sure that something is not empty it's required.
So I'll show you how to do that.
Start to go back to our form that we left off with and but just make sure that user name is not empty
.
So all we have to do is go to input and add the required attribute.
And this is a slightly different attribute.
We don't have to say required because true or anything you can do that.
All we do is say required and just by adding it there it's called a boolean attribute.
The fact that it's even present means that it's true.
It is required.
So this makes a pretty immediate impact.
If I try and submit this form right now Crome is actually going to tell me please fill out this field
.
One side note this actually won't work in every single browser.
It's actually up to the browser right now to implement this.
But in Chrome this will work.
So it prevents the form troops from submitting the pages not refresh.
But if I do fill this in the page now refreshes takes me to Wikipedia.
Likewise we can add required to our password field.
It works the exact same way.
Flyleaf leave both blank first is going to yell at me for user name then we'll yell at me for password
.
Then it will submit the form so that one type of validation which is what we would call a presence validation
and make sure that something is there is required.
The other type of validation that we can do is based around data type or the format of data.
So the simplest one is to make sure that an email actually looks like an e-mail that it actually has
the correct format where we have something at something dot com or dot some domain.
So to do that it's actually really simple all that we need to do so let's change this to be an email
rather than user name
type equals email and just by changing type it be email and I'll change my placeholder just so it's
clearer what's happening.
I refresh this first thing this going to happen when I submit to you know tell me please fill it out
.
So then let's fill it out.
Hello.
Now it's going to tell me please include an at sign in the e-mail address.
Hello is missing and outside so I can add my ADD sign then it's still going to tell me please enter
a part following that.
And let's just do gmail dot com.
OK so now that one passes then we stole the password.
Now I click submit and then it finally submit