1
00:00:00,300 --> 00:00:00,960
Welcome back.

2
00:00:01,280 --> 00:00:06,690
Lesson of the section, and this is where we do a final code review of the application we've been building

3
00:00:06,690 --> 00:00:11,480
out in the earlier lessons, it's a little bit of styling and you're welcome to customize that as needed.

4
00:00:11,490 --> 00:00:15,390
We created a form HTML form, so creating inputs.

5
00:00:15,390 --> 00:00:20,310
And one of the things that we did have to stay away from is the HTML5 input types.

6
00:00:20,550 --> 00:00:27,320
So if we set email here, then we'd get the five email and we want to strictly stay with JavaScript.

7
00:00:27,330 --> 00:00:33,720
So that's why we kept it as text and also while building it, we kept password as text as well so that

8
00:00:33,720 --> 00:00:35,790
we can see the content that's being input there.

9
00:00:36,060 --> 00:00:40,010
We use JavaScript to create some objects of the elements on the page.

10
00:00:40,200 --> 00:00:43,050
So that gave us the ability to easier interact with them.

11
00:00:43,050 --> 00:00:45,840
And we also set up some default variables.

12
00:00:45,840 --> 00:00:51,450
So we have a listing of the required fields and we can add as many as we want.

13
00:00:51,750 --> 00:00:53,130
This is fairly dynamic.

14
00:00:53,130 --> 00:00:58,860
So if we want to add additional required input fields, we can add them here as we add them into our

15
00:00:59,130 --> 00:00:59,610
HTML.

16
00:00:59,640 --> 00:01:04,920
We also adding an event listener to the form submit as we didn't want the default form submission to

17
00:01:04,920 --> 00:01:07,080
happen before we do our validation.

18
00:01:07,080 --> 00:01:10,200
So this is our spot to do the validation in between.

19
00:01:10,350 --> 00:01:13,080
So we had to prevent the default action from happening.

20
00:01:13,090 --> 00:01:19,560
We got the event object, prevented default, created a variable, an object in order to hold some of

21
00:01:19,590 --> 00:01:21,240
the data from the input form.

22
00:01:21,240 --> 00:01:27,180
So building it out as an object, we loop through the elements with the class of error and we added

23
00:01:27,180 --> 00:01:34,170
the class side to them as so that the form could be submitted and we could update it depending on the

24
00:01:34,170 --> 00:01:35,320
updated data.

25
00:01:35,370 --> 00:01:40,470
We also set a variable called error versus boolean value to false.

26
00:01:40,470 --> 00:01:45,240
And if we do throw any errors, so we're going to set it to true and then that's going to prevent us

27
00:01:45,240 --> 00:01:46,580
from submitting our form.

28
00:01:46,590 --> 00:01:50,220
So as long as error stays false, then we're going to submit our form.

29
00:01:50,250 --> 00:01:52,170
So we had to loop through all of the inputs.

30
00:01:52,200 --> 00:01:54,900
So again, trying to be as dynamic as possible.

31
00:01:55,050 --> 00:02:00,720
So if we have more input fields, we can really easily incorporate them in our application as we're

32
00:02:00,720 --> 00:02:08,160
selecting all of the elements that have that have a tag of input and adding them into the inputs object.

33
00:02:08,220 --> 00:02:12,320
So we loop through and we pick up the element attribute name.

34
00:02:12,540 --> 00:02:17,370
So this gives us the ability to grab that attribute name of each one of these.

35
00:02:17,400 --> 00:02:22,680
So we're going to get email, password, username, and this one doesn't have a name, so it's not actually

36
00:02:22,680 --> 00:02:23,640
going to be picked up.

37
00:02:23,640 --> 00:02:26,600
So if it is null, we're not going to do anything with it.

38
00:02:26,640 --> 00:02:30,160
So that means that's a submit button or another one that we're not trying to track.

39
00:02:30,300 --> 00:02:35,040
So it actually doesn't matter if it's sitting in the form we're setting our default border color to

40
00:02:35,040 --> 00:02:38,100
the default colors or starting color of the border.

41
00:02:38,310 --> 00:02:44,310
So because whenever we throw some errors or change it red, so we want to reset them all back to the

42
00:02:44,310 --> 00:02:46,590
default color as we loop through.

43
00:02:46,740 --> 00:02:52,140
And if there are some errors, then we pass into the function, the error handling function.

44
00:02:52,140 --> 00:02:57,270
We're passing the element, a message as well as the current input field that it's on.

45
00:02:57,390 --> 00:02:59,760
And then, of course, we're setting error to true.

46
00:02:59,970 --> 00:03:03,100
You can see that these are the conditions that we're applying.

47
00:03:03,120 --> 00:03:10,890
So first we're checking to see if length is equal to zero and if it is equal to zero, and if the field

48
00:03:10,890 --> 00:03:14,850
is required within our required list, then we're going to throw this error.

49
00:03:15,030 --> 00:03:21,750
The next one that we check to see is if the email matches the email pattern that we've got from regular

50
00:03:21,750 --> 00:03:22,350
expression.

51
00:03:22,560 --> 00:03:29,610
And if the result is true, then if the result is false, then we know we've got an invalid email.

52
00:03:29,610 --> 00:03:33,300
If it's result of true, then we're going to move on to the next condition.

53
00:03:33,690 --> 00:03:38,670
And the same thing here for checking the password input that we're checked.

54
00:03:38,680 --> 00:03:42,300
We've got a regular expression that we're checking and we're testing against it.

55
00:03:42,540 --> 00:03:48,780
And if it's not matching the criteria, which are letters and numbers, then we throw an error.

56
00:03:48,780 --> 00:03:51,450
So passing it into our error handling function.

57
00:03:51,690 --> 00:03:56,780
And we're also checking to see to make sure the length of the password to eight characters.

58
00:03:57,360 --> 00:03:58,910
So this could actually be two.

59
00:03:59,220 --> 00:04:00,900
So just a quick update there.

60
00:04:01,050 --> 00:04:05,940
So this is making sure because it's greater than two, so it's not going to be equal to two.

61
00:04:06,090 --> 00:04:10,650
So that's why three is greater than two and eight is less than nine.

62
00:04:10,890 --> 00:04:12,870
And that's where we're going to throw this error.

63
00:04:12,900 --> 00:04:19,440
If any one of these statements comes back true, then if this whole statement condition comes back as

64
00:04:19,860 --> 00:04:22,650
is true, then we're going to throw the error there.

65
00:04:22,650 --> 00:04:28,350
And if we don't throw any errors then or if we do throw any errors, we're still adding it into our

66
00:04:28,350 --> 00:04:29,190
data object.

67
00:04:29,400 --> 00:04:34,350
So we're building out a data object of all the inputs, using the names and the values.

68
00:04:34,680 --> 00:04:37,740
And then we're checking to see if any of the errors are true.

69
00:04:37,920 --> 00:04:40,650
And if they are true, then we're going to skip this part.

70
00:04:40,650 --> 00:04:44,970
And if they're not true, then if they're still false, that means that we didn't throw any errors and

71
00:04:44,970 --> 00:04:46,290
we're good to submit the form.

72
00:04:46,440 --> 00:04:51,920
And this is where the form submission happens, triggered by JavaScript, our odd error handler.

73
00:04:52,110 --> 00:04:58,530
So this is where all of the magic happens, where we select the next element that's next to the current

74
00:04:58,530 --> 00:04:59,000
elements.

75
00:04:59,000 --> 00:04:59,850
So the structure one.

76
00:05:00,020 --> 00:05:05,680
That we have an input and we have a span and the span has a class of error and we can hide it so we

77
00:05:05,680 --> 00:05:13,120
can remove the hide variable, the Hyde class that's associated with it, and then we can update the

78
00:05:13,420 --> 00:05:14,430
inner text.

79
00:05:14,430 --> 00:05:20,890
So updating the field and then the message and changing the border to be rid of the element and setting

80
00:05:20,890 --> 00:05:22,570
the focus on that element.

81
00:05:22,900 --> 00:05:25,340
So that concluded all of the project.

82
00:05:25,570 --> 00:05:29,710
So now we have a fully functional form that's going to look for inputs.

83
00:05:29,740 --> 00:05:32,260
So this is the only one that was triggered.

84
00:05:32,470 --> 00:05:35,710
And until we get a valid email, we can't submit the form.

85
00:05:35,980 --> 00:05:40,570
And you see, once we've got the valid email, we're submitting the form and the form is going back

86
00:05:40,570 --> 00:05:42,550
to that indexed HTML.

87
00:05:42,760 --> 00:05:45,520
We don't have any backend form handling that we're doing.

88
00:05:46,000 --> 00:05:47,530
So that's why it's submitting it there.

89
00:05:47,650 --> 00:05:53,830
But the form submission is being processed and done and this is how you can add validation into your

90
00:05:53,830 --> 00:05:54,250
form.

91
00:05:54,460 --> 00:05:56,170
Source code has been included.

92
00:05:56,200 --> 00:06:00,900
So I do encourage you to try it out for yourself as well as if you have any questions or comments or

93
00:06:00,910 --> 00:06:02,260
need clarity on the content.

94
00:06:02,410 --> 00:06:03,520
I'm always happy to help.

95
00:06:03,670 --> 00:06:09,370
Thanks again for taking the course and for going through the section on form of validation with JavaScript.