1
00:00:00,090 --> 00:00:00,600
Welcome back.

2
00:00:00,630 --> 00:00:02,580
How's your form coming along this lesson?

3
00:00:02,610 --> 00:00:08,340
We're going to make it interactive, so we want to make the submit button interactive, whatever the

4
00:00:08,340 --> 00:00:12,540
button gets clicked, then adding in the option for submit.

5
00:00:12,750 --> 00:00:19,080
And we could do this by selecting that form object because it does have a default action of submit using

6
00:00:19,080 --> 00:00:22,950
the submit button so we can listen for the submit of the form.

7
00:00:23,130 --> 00:00:28,770
And if the form gets submitted, then we can run the function validation, creating that function we're

8
00:00:28,770 --> 00:00:33,260
passing in the event object and we're going to console logout that event object.

9
00:00:33,390 --> 00:00:38,370
So when we refresh and we sign up of the form, you notice that the form submits.

10
00:00:38,610 --> 00:00:44,430
So we want to prevent that default action so that we can do with E prevent default, which is a method

11
00:00:44,430 --> 00:00:50,580
in JavaScript that removes out any of the default actions that would be typically in the elements such

12
00:00:50,580 --> 00:00:52,880
as the submit button on a form.

13
00:00:53,160 --> 00:00:54,600
So try that one more time.

14
00:00:54,840 --> 00:01:00,200
And this time when we submit it, we see that we don't move to a new URL because we've got to prevent

15
00:01:00,240 --> 00:01:05,580
default and we see the console content where we're outputting the event object and this is the event

16
00:01:05,580 --> 00:01:07,350
object that gets past.

17
00:01:07,590 --> 00:01:11,070
We've got default prevented as true.

18
00:01:11,220 --> 00:01:16,200
So we see that this particular element, whenever the event has triggered the default, is prevented

19
00:01:16,380 --> 00:01:20,170
because we don't want the form submitting and before we can run our validation.

20
00:01:20,430 --> 00:01:25,050
So that's one of the important things here, is to make sure that we're not submitting before we can

21
00:01:25,050 --> 00:01:26,510
run our validation.

22
00:01:26,580 --> 00:01:29,730
So other thing that we need to do is apply a little bit of staling.

23
00:01:29,750 --> 00:01:35,130
I don't want to focus too much time on the styling, but we do need to have a little bit of styling

24
00:01:35,130 --> 00:01:37,230
for the different elements on the page.

25
00:01:37,410 --> 00:01:44,430
And one of them that I want to introduce is Hyd, because by default, I want the height class to display

26
00:01:44,670 --> 00:01:45,180
none.

27
00:01:45,390 --> 00:01:49,110
So not showing the element that has a class of hide.

28
00:01:49,120 --> 00:01:55,650
And also we can make the error look a little bit more like an error so we can set it as a color of red

29
00:01:55,890 --> 00:01:57,720
and do the font size.

30
00:01:57,900 --> 00:02:05,130
We can make the font size smaller if we want to zero point a.T.M and also maybe set the font family.

31
00:02:05,160 --> 00:02:07,650
So that's different than the rest of the text on the page.

32
00:02:07,920 --> 00:02:09,620
And also one last one.

33
00:02:09,630 --> 00:02:14,660
Let's set the font style and you probably want to redo the styling.

34
00:02:14,670 --> 00:02:19,680
So this was just some quick styling that we have that we see that we've got a little bit of styling

35
00:02:19,680 --> 00:02:23,430
applied to our input forms, so updating our border color.

36
00:02:23,610 --> 00:02:29,400
So this is one of the things that we want to make sure that we do have the ability to change with JavaScript

37
00:02:29,400 --> 00:02:30,870
and that's going to be the border color.

38
00:02:30,870 --> 00:02:37,680
So I want to do set is a default border color and we're going to update that and change that using JavaScript,

39
00:02:37,830 --> 00:02:40,770
also setting a default with and also default.

40
00:02:41,010 --> 00:02:46,710
So if we do default block, what's going to happen is by default, we're going to have a new line for

41
00:02:46,710 --> 00:02:50,340
each one of the inputs and also want to make them slightly bigger.

42
00:02:50,460 --> 00:02:54,960
So updating the font size so our input fields are bigger.

43
00:02:54,990 --> 00:02:57,180
So let's refresh that and see what that looks like.

44
00:02:57,270 --> 00:02:58,950
So now we've got our input fields.

45
00:02:58,950 --> 00:03:01,230
We've got kind of these labels here.

46
00:03:01,230 --> 00:03:07,260
They're not actual real labels, but they're just text here indicating what to expect within that input

47
00:03:07,260 --> 00:03:07,650
field.

48
00:03:07,800 --> 00:03:12,360
And then we still have our sign up button here, ready to move on to the next lesson for when we do

49
00:03:12,360 --> 00:03:17,490
click the sign up button, we're invoking a function and this is the function that's going to actually

50
00:03:17,490 --> 00:03:18,830
do our validation.

51
00:03:19,110 --> 00:03:21,640
So all of that is still yet to come.

52
00:03:21,660 --> 00:03:28,650
And coming up in the next lesson, we're going to start by checking to see what the element is that

53
00:03:29,070 --> 00:03:33,690
checking through all the different elements, building out an object and then just making sure that

54
00:03:33,690 --> 00:03:36,370
they are valid before we submit the form.

55
00:03:36,480 --> 00:03:37,980
So all of that is still yet to come.