1
00:00:00,150 --> 00:00:05,940
In this lesson, we're going to be building our required fields and then we can add that in down here,

2
00:00:06,120 --> 00:00:11,370
checking to see if the field is there and if it's one of the ones that we're requiring.

3
00:00:11,610 --> 00:00:16,490
So taking the element and getting the value and each one of these.

4
00:00:16,500 --> 00:00:20,730
So we're using the string length value, which is going to turn back the value.

5
00:00:20,880 --> 00:00:27,330
And we're checking to see if string length is zero and if it's zero, that means that that field is

6
00:00:27,360 --> 00:00:28,440
doesn't have any content.

7
00:00:28,800 --> 00:00:35,070
So we can add in our error message or create a function in order to handle the error so we can have

8
00:00:35,280 --> 00:00:39,780
the function called add error passing in the element that we want to update.

9
00:00:39,990 --> 00:00:41,620
And then also a message.

10
00:00:41,850 --> 00:00:49,390
So this message is required field and then also passing in the name of the required field.

11
00:00:49,410 --> 00:00:55,500
So in case we want to use it in our output so we have an error message that we can create, and that

12
00:00:55,500 --> 00:00:57,960
means that we got to create a function in order to handle that.

13
00:00:58,350 --> 00:01:00,430
So function and error.

14
00:01:00,930 --> 00:01:07,450
So this function is going to be the one that's going to show the error messages and that error content.

15
00:01:07,470 --> 00:01:09,120
So we're picking up the elements.

16
00:01:09,380 --> 00:01:14,910
We've got a bunch of parameters, the message that's contained within there, as well as the field name

17
00:01:15,150 --> 00:01:16,230
that we're using.

18
00:01:16,860 --> 00:01:24,600
And here we can create a temporary variable so we can also select the next element sibling.

19
00:01:24,650 --> 00:01:30,300
So this is a JavaScript variable that can allow us to select the next element sibling.

20
00:01:30,510 --> 00:01:31,950
So show you what that is.

21
00:01:32,110 --> 00:01:38,090
And when I click that, you can see that the next element sibling is all of these error messages.

22
00:01:38,100 --> 00:01:42,150
So the next one for email is going to be error hyd.

23
00:01:42,150 --> 00:01:43,410
So that's this one here.

24
00:01:43,590 --> 00:01:47,340
Password has one, username has one and then null.

25
00:01:47,340 --> 00:01:51,510
We're not we're not sending over using class list.

26
00:01:52,020 --> 00:01:58,600
And then the method to remove we're going to remove the element that has the class of hide.

27
00:01:58,620 --> 00:01:59,650
So next sibling.

28
00:02:00,180 --> 00:02:04,770
So that means that if I go to inspect and we don't have any content in there yet.

29
00:02:04,980 --> 00:02:12,630
But you can see that when I go into form and we've got all of our span's now have the error message

30
00:02:12,630 --> 00:02:13,050
in there.

31
00:02:13,290 --> 00:02:19,680
So if I refresh and if I do sign up, it's going to it's going to remove it from all the elements except

32
00:02:19,680 --> 00:02:20,360
for email.

33
00:02:20,580 --> 00:02:22,290
So email the next one.

34
00:02:22,290 --> 00:02:24,560
The error one still has hide.

35
00:02:25,080 --> 00:02:33,540
But when we look at the next one on the password, the height is gone as well as the next one for the

36
00:02:33,540 --> 00:02:34,290
username.

37
00:02:34,470 --> 00:02:36,000
The height is gone as well.

38
00:02:36,010 --> 00:02:37,350
So that means that we're showing them.

39
00:02:37,680 --> 00:02:39,300
So we need to add in some text.

40
00:02:39,510 --> 00:02:43,700
We can use text content to add some text into it.

41
00:02:44,100 --> 00:02:48,570
So taking that field name and let's bring that to uppercase.

42
00:02:48,990 --> 00:02:54,450
So it's using the JavaScript method to manipulate the string contents, to manipulate string contents.

43
00:02:54,810 --> 00:02:59,190
And we're going to add in whatever the message is into the content.

44
00:02:59,190 --> 00:03:00,450
So let's see how that looks.

45
00:03:00,720 --> 00:03:05,310
So now when we do sign up, you see that all of these are showing now.

46
00:03:05,400 --> 00:03:10,230
And that's exactly what we want because we want to pass that error message to the user, also taking

47
00:03:10,230 --> 00:03:12,270
the elements, taking the style.

48
00:03:12,510 --> 00:03:19,320
And as we've set the border color to a default color, we can also update it to read if there's any

49
00:03:19,320 --> 00:03:24,420
errors and then also taking the elements and applying focus to that element.

50
00:03:24,420 --> 00:03:29,200
So we passed on all that error message and this is our error message handler function.

51
00:03:29,580 --> 00:03:35,430
So now whenever we throw an error, you can see that they all go red and the focus, the focus is going

52
00:03:35,430 --> 00:03:39,810
on the last one because it's doing focus on each one as it iterate through.

53
00:03:39,900 --> 00:03:45,080
We're tricking this on any ones that have a length of zero, but they're not all required.

54
00:03:45,240 --> 00:03:51,180
So we want to look through and we only want to return back the ones that are actually required variable

55
00:03:51,180 --> 00:03:54,110
that we set up an array that we called required.

56
00:03:54,270 --> 00:04:03,180
So we're going to check to see if length is zero and if the required array includes the contents of

57
00:04:03,180 --> 00:04:03,930
temp name.

58
00:04:04,340 --> 00:04:08,250
Name again, is that attribute name if it's required.

59
00:04:08,250 --> 00:04:10,980
So only right now we're requiring email and username.

60
00:04:11,130 --> 00:04:16,320
So we're not going to get an error message on password as we've got contents or not.

61
00:04:16,590 --> 00:04:17,850
That one is not required.

62
00:04:18,000 --> 00:04:23,360
And when we don't have any contents in the username, then that's when it shows up or the email and

63
00:04:23,550 --> 00:04:24,810
in this validation.

64
00:04:24,810 --> 00:04:29,040
And then we've got some more validation that we're going to be adding in the upcoming lessons, checking

65
00:04:29,040 --> 00:04:31,890
to see if this input is actually an email.

66
00:04:32,130 --> 00:04:36,540
The password is going to have to be either numbers or characters.

67
00:04:36,750 --> 00:04:41,790
So that's going to be some of the parameters for the password that we can add in, a few others that

68
00:04:41,790 --> 00:04:47,460
we can also add in just to make sure that we've got some more additional checks that we can place within

69
00:04:47,460 --> 00:04:50,340
the validation and add in a function to handle the error.

70
00:04:50,580 --> 00:04:55,530
And this is going to be the one that selects the next element and all of the next elements.

71
00:04:55,530 --> 00:04:59,400
Remember, within our structure, we always place the span with a class of.

72
00:04:59,750 --> 00:05:05,850
And we had that class, so this gives us an element where we can add in that error message.

73
00:05:06,380 --> 00:05:08,810
So go ahead and add that into your project.

74
00:05:09,080 --> 00:05:11,300
And coming up next, we're going to extend on this.