1
00:00:00,510 --> 00:00:02,332
-: Our signup form is coming along pretty well.

2
00:00:02,332 --> 00:00:04,890
We've got a form at least put on the screen

3
00:00:04,890 --> 00:00:06,780
with the correct email password

4
00:00:06,780 --> 00:00:10,050
and password confirmation fields to display to the user.

5
00:00:10,050 --> 00:00:12,150
And then once the user clicks on the submit button,

6
00:00:12,150 --> 00:00:14,760
presumably it's gonna try to submit the form.

7
00:00:14,760 --> 00:00:15,593
Now remember,

8
00:00:15,593 --> 00:00:18,090
we need to do kind of a two stage validation here.

9
00:00:18,090 --> 00:00:19,320
First, we need to make sure

10
00:00:19,320 --> 00:00:21,649
that the user has entered a password

11
00:00:21,649 --> 00:00:24,270
that matches the password confirmation,

12
00:00:24,270 --> 00:00:25,410
and that's a validation

13
00:00:25,410 --> 00:00:27,252
that we're going to do on the client side.

14
00:00:27,252 --> 00:00:30,360
Once we have validated that the user

15
00:00:30,360 --> 00:00:31,860
has entered correct information,

16
00:00:31,860 --> 00:00:32,970
then we can send it off

17
00:00:32,970 --> 00:00:35,822
to the server and attempt to actually create the account.

18
00:00:35,822 --> 00:00:39,480
So in other words, whenever a user submits our form,

19
00:00:39,480 --> 00:00:42,030
we kind of want to hijack that event, so to speak.

20
00:00:42,030 --> 00:00:42,877
We kinda wanna say,

21
00:00:42,877 --> 00:00:45,480
"hey, before you actually really submit this form,

22
00:00:45,480 --> 00:00:47,760
let's validate all the different inputs in here

23
00:00:47,760 --> 00:00:50,700
and make sure that the user has entered kind of correct

24
00:00:50,700 --> 00:00:54,237
or relevant information to create this account."

25
00:00:55,530 --> 00:00:57,690
So luckily, a Redux Form makes it really easy

26
00:00:57,690 --> 00:00:59,670
to handle validation on the client side

27
00:00:59,670 --> 00:01:01,628
for any form that we might create.

28
00:01:01,628 --> 00:01:03,210
Let's take a look at a diagram

29
00:01:03,210 --> 00:01:05,190
that's gonna help us understand exactly

30
00:01:05,190 --> 00:01:07,053
how Redux Form does validation.

31
00:01:12,720 --> 00:01:14,723
So inside this diagram, we've kind of the process

32
00:01:14,723 --> 00:01:16,720
by which Redux Form does validation.

33
00:01:16,720 --> 00:01:19,680
On the top left, we've got our actual form.

34
00:01:19,680 --> 00:01:23,300
It has the email password and password confirmation.

35
00:01:23,300 --> 00:01:25,950
And notice in here that I've got some just inputs

36
00:01:25,950 --> 00:01:29,070
that shows some kind of default text to display.

37
00:01:29,070 --> 00:01:33,355
The email is test@example.com, password of abcdefg,

38
00:01:33,355 --> 00:01:36,720
and a password confirmation of 12345.

39
00:01:36,720 --> 00:01:39,630
So note in this case that the two passwords do not match.

40
00:01:39,630 --> 00:01:41,463
And so we'd really consider this form

41
00:01:41,463 --> 00:01:44,070
as it stands right now to be invalid

42
00:01:44,070 --> 00:01:46,922
or something that should not be submitted to the backend.

43
00:01:46,922 --> 00:01:50,400
So whenever a user makes any change to the form,

44
00:01:50,400 --> 00:01:54,240
say they enter a key or they click into an input

45
00:01:54,240 --> 00:01:55,710
and then click out of it,

46
00:01:55,710 --> 00:01:57,990
or if they click the signup button itself,

47
00:01:57,990 --> 00:01:59,125
if they try to submit the form,

48
00:01:59,125 --> 00:02:01,483
Redux Form is going to automatically try

49
00:02:01,483 --> 00:02:04,039
to validate these inputs for us.

50
00:02:04,039 --> 00:02:07,489
The way that validation works in Redux Forum is as so.

51
00:02:07,489 --> 00:02:10,262
Redux Forum is gonna take all the different fields

52
00:02:10,262 --> 00:02:13,680
and all of their current values, and it's gonna send them

53
00:02:13,680 --> 00:02:17,816
to a function that we are going to create called validate.

54
00:02:17,816 --> 00:02:20,520
So that's this kind of validate box over here.

55
00:02:20,520 --> 00:02:23,270
This is a function that we are going to make ourselves.

56
00:02:24,437 --> 00:02:26,520
Redux Form is going to automatically

57
00:02:26,520 --> 00:02:27,615
take all the different fields

58
00:02:27,615 --> 00:02:30,024
off of our form and pass 'em to validate.

59
00:02:30,024 --> 00:02:31,284
Now, this is very important.

60
00:02:31,284 --> 00:02:34,230
The object that gets passed to validate

61
00:02:34,230 --> 00:02:38,040
by Redux Form is an object where the keys are the names

62
00:02:38,040 --> 00:02:41,471
of our fields and the values are the current inputs

63
00:02:41,471 --> 00:02:43,920
inside each of these fields.

64
00:02:43,920 --> 00:02:46,907
So in this particular case, because we have an email field,

65
00:02:46,907 --> 00:02:50,090
a password field, and a password confirm field,

66
00:02:50,090 --> 00:02:54,304
the object that we get to validate against has keys,

67
00:02:54,304 --> 00:02:57,219
email, password, and password confirm.

68
00:02:57,219 --> 00:02:59,460
And then they've got the matching values

69
00:02:59,460 --> 00:03:02,253
to whatever's currently inside of our inputs up here.

70
00:03:04,110 --> 00:03:06,240
So here's how we actually do validation.

71
00:03:06,240 --> 00:03:07,200
You know, we're getting the data

72
00:03:07,200 --> 00:03:09,450
inside of the validate function here.

73
00:03:09,450 --> 00:03:12,431
What we're going to do is we're gonna create a new object.

74
00:03:12,431 --> 00:03:14,973
So we're gonna create an entirely new object.

75
00:03:16,560 --> 00:03:19,170
This object is gonna have a couple different keys to it.

76
00:03:19,170 --> 00:03:22,530
It's gonna have a key email password, and password confirm.

77
00:03:22,530 --> 00:03:23,760
So we're kind of making an object

78
00:03:23,760 --> 00:03:25,140
that's gonna look just like this.

79
00:03:25,140 --> 00:03:25,973
But here's the trick.

80
00:03:25,973 --> 00:03:30,973
The value of each of those keys is a validation message

81
00:03:31,350 --> 00:03:32,970
to show to our user.

82
00:03:32,970 --> 00:03:33,803
So for example,

83
00:03:33,803 --> 00:03:38,626
if a user tries to just fill out an email here

84
00:03:38,626 --> 00:03:40,982
and then passwords that do not match,

85
00:03:40,982 --> 00:03:43,400
so that's as is the case right here,

86
00:03:43,400 --> 00:03:46,891
we would return an error object that has two keys,

87
00:03:46,891 --> 00:03:50,205
a key password and a password confirm,

88
00:03:50,205 --> 00:03:52,980
and then the value for each of those keys

89
00:03:52,980 --> 00:03:54,187
would be something like,

90
00:03:54,187 --> 00:03:57,058
"hey please enter matching passwords here."

91
00:03:57,058 --> 00:04:00,721
So essentially what we wanna do is just return an object

92
00:04:00,721 --> 00:04:03,460
from this validate function that has a key

93
00:04:03,460 --> 00:04:05,610
of the field that we're talking about

94
00:04:05,610 --> 00:04:09,017
and a value of the message that we wanna show to the user.

95
00:04:09,017 --> 00:04:11,400
Now, if a user tries to submit the form

96
00:04:11,400 --> 00:04:14,610
and there are no errors, like they did everything correct,

97
00:04:14,610 --> 00:04:17,760
all we have to do in that case is return an empty object

98
00:04:17,760 --> 00:04:18,752
and that tells Redux Form,

99
00:04:18,752 --> 00:04:20,519
"hey, everything here looks good."

100
00:04:20,519 --> 00:04:23,104
"Don't need to worry about doing any validation."

101
00:04:23,104 --> 00:04:25,500
So with this knowledge in mind,

102
00:04:25,500 --> 00:04:28,710
let's try putting it to application in the next section.

103
00:04:28,710 --> 00:04:29,660
I'll see you there.