1
00:00:00,210 --> 00:00:01,050
Hello and welcome.

2
00:00:01,110 --> 00:00:07,140
We've got a basic default HTML page indexed HTML in this lesson, we're going to be setting up the form

3
00:00:07,140 --> 00:00:12,130
that we're going to be using in the upcoming lessons in order to validate the form contents.

4
00:00:12,360 --> 00:00:15,810
So first of all, set up a form tag, give the form a name.

5
00:00:15,810 --> 00:00:19,430
You can call it whatever you want to call this just my form.

6
00:00:19,740 --> 00:00:24,270
And then within that form we're going to be adding in some input fields.

7
00:00:24,550 --> 00:00:27,090
So we're going to need to get an email address.

8
00:00:27,090 --> 00:00:29,000
And this could be a really basic form.

9
00:00:29,220 --> 00:00:33,540
So setting up an input type and the type can be text.

10
00:00:34,170 --> 00:00:35,550
So we're looking for an email.

11
00:00:35,730 --> 00:00:41,760
And with each HTML5, if you do put type email, then it already has some validation.

12
00:00:41,760 --> 00:00:44,520
And we did want to focus on the JavaScript validation.

13
00:00:44,760 --> 00:00:48,720
So that's why we're going to keep it, keep it as a text input.

14
00:00:49,320 --> 00:00:53,580
So we've got a name and the name for this input is going to be email.

15
00:00:53,820 --> 00:01:00,810
And then after each one of these inputs, I'm also going to create a span and give that span a class

16
00:01:00,810 --> 00:01:01,590
of error.

17
00:01:01,770 --> 00:01:07,050
And then by default, we're going to be hiding these elements with elements of the class of error.

18
00:01:07,320 --> 00:01:09,570
So we're going to go ahead and are going to just hide those.

19
00:01:09,780 --> 00:01:11,070
So we've got an email.

20
00:01:11,280 --> 00:01:13,810
Let's add in a few other fields that we can pick up.

21
00:01:13,950 --> 00:01:21,450
So typically, we might want to get a password and we'll keep this as type text as well so that we can

22
00:01:21,450 --> 00:01:28,350
see the password data that's being entered in and then also add in that span with a class of error as

23
00:01:28,350 --> 00:01:29,080
well as height.

24
00:01:29,100 --> 00:01:34,260
And this is going to give us an option to output a message to the user just underneath the input.

25
00:01:34,470 --> 00:01:36,100
And then lastly, let's do one more.

26
00:01:36,100 --> 00:01:40,530
We'll just call this one username and we can keep this one as text as well.

27
00:01:40,710 --> 00:01:43,200
And this can have a name of user name.

28
00:01:43,350 --> 00:01:48,840
And again, that same thing where we've got a span with a class of error as well as height, and we're

29
00:01:48,840 --> 00:01:55,110
going to be manipulating, removing the class of hide and then updating and updating the inner turmoil

30
00:01:55,110 --> 00:01:59,390
of the element with a class of error and doing all of this with a JavaScript.

31
00:01:59,730 --> 00:02:03,970
And then lastly, one more input, and this one is going to be a submit.

32
00:02:04,260 --> 00:02:06,570
So this is a very typical simple form.

33
00:02:06,780 --> 00:02:09,750
Also, let's assign a value to this one.

34
00:02:09,760 --> 00:02:12,260
So maybe this is sign up or log in.

35
00:02:12,630 --> 00:02:15,320
So we've got some inputs that we're asking in the form.

36
00:02:15,540 --> 00:02:17,640
So next we need to validate the forms.

37
00:02:17,640 --> 00:02:23,610
When we click it, it just simply submits the form data and it moves along to the next page with the

38
00:02:23,610 --> 00:02:26,530
Post in order to get information at the top.

39
00:02:26,940 --> 00:02:34,320
So next, let's bring our JavaScript on board, connecting our elements, using the JavaScript.

40
00:02:34,590 --> 00:02:36,660
So I'm going to set up some variable objects.

41
00:02:37,050 --> 00:02:39,920
So first one that we're going to need to work with is the form.

42
00:02:40,170 --> 00:02:45,990
So using documents and query selector in order to select the element, we're going to select the elements.

43
00:02:45,990 --> 00:02:50,760
And the element that we can select is a form when we have the one form that we're working with.

44
00:02:50,910 --> 00:02:54,780
And if you do have more than one form on the page, of course you've got to be more specific in your

45
00:02:54,780 --> 00:02:55,880
selection process.

46
00:02:56,400 --> 00:03:00,360
We're going to select all of the inputs that are available on the page.

47
00:03:00,570 --> 00:03:07,920
So that will allow us to fairly easily loop through them and pick up all of the input values without

48
00:03:07,920 --> 00:03:09,960
having to be really specific with the names.

49
00:03:10,320 --> 00:03:13,830
Also, we want to pick up all the elements with a class of error.

50
00:03:14,130 --> 00:03:19,700
So the same thing where we're going to use query selector all in order to pick up all the elements with

51
00:03:19,710 --> 00:03:20,970
a class of error.

52
00:03:21,300 --> 00:03:25,100
And this is where all of our message error messaging information can go.

53
00:03:25,110 --> 00:03:27,360
And one more variable to set up.

54
00:03:27,360 --> 00:03:30,420
And this is going to be listing out the required fields.

55
00:03:30,690 --> 00:03:39,120
So anyone with the name of anything within this required array is going to be a required field.

56
00:03:39,130 --> 00:03:41,240
So there's going to have to be a value within this field.

57
00:03:41,550 --> 00:03:47,790
So once we've set that up, our JavaScript just makes sure that we do have access to all of the elements.

58
00:03:48,120 --> 00:03:50,550
So we do have form as an object format.

59
00:03:50,550 --> 00:03:51,780
We've got the inputs.

60
00:03:52,140 --> 00:03:56,360
So we've got all of the inputs listed there on this should be query selector all.

61
00:03:56,910 --> 00:03:58,950
So it's a good thing to always to check.

62
00:03:59,190 --> 00:04:03,560
So now want I do inputs, you're going to see that it's a node list and we do have four inputs.

63
00:04:03,570 --> 00:04:07,590
Remember the type, the submit button is as well an input as well.

64
00:04:08,040 --> 00:04:10,560
And then the errors and this is a node list.

65
00:04:10,560 --> 00:04:15,980
So we've got three elements with a class of error within our errors node list.

66
00:04:16,200 --> 00:04:19,280
And then lastly, these are the required fields.

67
00:04:19,560 --> 00:04:25,050
And again, with HTML5 you can put required in and that will make it a mandatory field.

68
00:04:25,170 --> 00:04:29,070
But we did want to focus on the JavaScript and the DOM manipulations.

69
00:04:29,070 --> 00:04:35,220
So we are going to be focusing and strictly using the JavaScript in order to validate the form contents.

70
00:04:35,490 --> 00:04:41,100
So go ahead and set this up, check to make sure that you've got your elements as objects and JavaScript

71
00:04:41,110 --> 00:04:45,540
and you'll be ready to move on to the next lesson and you could create a simple form.

72
00:04:45,780 --> 00:04:49,080
You can also add in, add some additional inputs as well.

73
00:04:49,230 --> 00:04:51,630
We're going to be making this form fairly dynamic.

74
00:04:51,630 --> 00:04:56,610
And as you can see, when we're doing a query selector, all of the inputs doesn't matter how many inputs

75
00:04:56,610 --> 00:04:59,910
we have, we're going to pick all of them up in our.

76
00:04:59,990 --> 00:05:06,380
Form, so coming up next, we're going to create some interaction with the form and then bring the validation

77
00:05:06,380 --> 00:05:07,850
into our JavaScript.