1
00:00:00,660 --> 00:00:07,410
So in this video we're going to focus on aged him a five form validations so validations referred to

2
00:00:07,680 --> 00:00:15,120
the ability to enforce rules and structure on different parts of a form so we can say that you cannot

3
00:00:15,120 --> 00:00:21,240
leave your email blank or your password must be greater than 10 characters or your email must follow

4
00:00:21,240 --> 00:00:23,020
a valid email syntax.

5
00:00:23,610 --> 00:00:27,450
So these validations are something that we're going to keep learning a lot about.

6
00:00:27,630 --> 00:00:31,890
We will do validations for javascript will do validations on the backend.

7
00:00:32,220 --> 00:00:36,840
Today we're just going to learn about the simple validations we can do with just plain aged him out

8
00:00:36,850 --> 00:00:37,030
.

9
00:00:37,200 --> 00:00:39,180
So these are not going to be insanely complicated.

10
00:00:39,180 --> 00:00:41,180
We can't do anything really custom.

11
00:00:41,300 --> 00:00:48,510
So we might want down the line to do a custom validation to make sure that somebody's phone number follows

12
00:00:48,510 --> 00:00:51,780
the exact correct format or we have an area code.

13
00:00:51,780 --> 00:00:58,590
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

14
00:00:58,590 --> 00:00:59,160
different things.

15
00:00:59,160 --> 00:01:04,120
We can check to make sure that something is not empty it's required.

16
00:01:04,440 --> 00:01:05,700
So I'll show you how to do that.

17
00:01:05,720 --> 00:01:15,480
Start to go back to our form that we left off with and but just make sure that user name is not empty

18
00:01:15,480 --> 00:01:16,060
.

19
00:01:16,140 --> 00:01:21,370
So all we have to do is go to input and add the required attribute.

20
00:01:21,510 --> 00:01:23,790
And this is a slightly different attribute.

21
00:01:23,970 --> 00:01:28,070
We don't have to say required because true or anything you can do that.

22
00:01:28,230 --> 00:01:33,160
All we do is say required and just by adding it there it's called a boolean attribute.

23
00:01:33,270 --> 00:01:35,760
The fact that it's even present means that it's true.

24
00:01:35,910 --> 00:01:37,550
It is required.

25
00:01:38,760 --> 00:01:40,750
So this makes a pretty immediate impact.

26
00:01:40,890 --> 00:01:46,920
If I try and submit this form right now Crome is actually going to tell me please fill out this field

27
00:01:46,920 --> 00:01:47,670
.

28
00:01:47,700 --> 00:01:51,210
One side note this actually won't work in every single browser.

29
00:01:51,330 --> 00:01:54,490
It's actually up to the browser right now to implement this.

30
00:01:54,540 --> 00:01:56,320
But in Chrome this will work.

31
00:01:56,400 --> 00:02:00,250
So it prevents the form troops from submitting the pages not refresh.

32
00:02:00,660 --> 00:02:07,470
But if I do fill this in the page now refreshes takes me to Wikipedia.

33
00:02:07,530 --> 00:02:11,640
Likewise we can add required to our password field.

34
00:02:11,640 --> 00:02:13,270
It works the exact same way.

35
00:02:13,440 --> 00:02:18,850
Flyleaf leave both blank first is going to yell at me for user name then we'll yell at me for password

36
00:02:18,840 --> 00:02:19,450
.

37
00:02:19,860 --> 00:02:25,950
Then it will submit the form so that one type of validation which is what we would call a presence validation

38
00:02:26,070 --> 00:02:29,730
and make sure that something is there is required.

39
00:02:29,790 --> 00:02:36,360
The other type of validation that we can do is based around data type or the format of data.

40
00:02:36,900 --> 00:02:44,190
So the simplest one is to make sure that an email actually looks like an e-mail that it actually has

41
00:02:44,400 --> 00:02:51,630
the correct format where we have something at something dot com or dot some domain.

42
00:02:52,050 --> 00:02:59,010
So to do that it's actually really simple all that we need to do so let's change this to be an email

43
00:02:59,220 --> 00:03:00,160
rather than user name

44
00:03:03,180 --> 00:03:08,870
type equals email and just by changing type it be email and I'll change my placeholder just so it's

45
00:03:08,880 --> 00:03:12,030
clearer what's happening.

46
00:03:12,030 --> 00:03:17,040
I refresh this first thing this going to happen when I submit to you know tell me please fill it out

47
00:03:17,060 --> 00:03:17,360
.

48
00:03:17,640 --> 00:03:18,780
So then let's fill it out.

49
00:03:18,900 --> 00:03:20,110
Hello.

50
00:03:20,880 --> 00:03:25,200
Now it's going to tell me please include an at sign in the e-mail address.

51
00:03:25,410 --> 00:03:30,540
Hello is missing and outside so I can add my ADD sign then it's still going to tell me please enter

52
00:03:30,540 --> 00:03:33,380
a part following that.

53
00:03:34,650 --> 00:03:39,050
And let's just do gmail dot com.

54
00:03:39,150 --> 00:03:42,680
OK so now that one passes then we stole the password.

55
00:03:42,690 --> 00:03:45,180
Now I click submit and then it finally submit