1
00:00:00,620 --> 00:00:05,650
In the last video we figured out how to hook up an on Smith event handler using redux form.

2
00:00:05,690 --> 00:00:08,630
Now in this video I want to show you something kind of interesting here.

3
00:00:08,660 --> 00:00:13,610
If we load up our form with no inputs whatsoever we can click on submit and we see an empty object over

4
00:00:13,610 --> 00:00:14,300
here.

5
00:00:14,330 --> 00:00:20,360
So this would be a case in which a user is attempting to submit our form entering in any title or description.

6
00:00:20,360 --> 00:00:22,570
Chances are we do not want to allow that.

7
00:00:22,640 --> 00:00:27,650
We probably want to make sure that a user always enters in a title and a description before we allow

8
00:00:27,650 --> 00:00:29,540
them to create a stream.

9
00:00:29,540 --> 00:00:35,100
This process of making sure that the user has entered in some acceptable input is referred to as validation.

10
00:00:35,240 --> 00:00:41,240
We can use validation to check for any type of element in the form so we can make sure that say a title

11
00:00:41,310 --> 00:00:46,540
any description or enter if we had an email input we could make sure that a user entered in an email.

12
00:00:46,610 --> 00:00:51,200
If you have a phone number input we can check to make sure the user entered in a valid phone number.

13
00:00:51,200 --> 00:00:57,230
So any type of validation you can possibly imagine is going to occur during this validation step handling

14
00:00:57,290 --> 00:01:01,590
validation once redux form is simultaneously kind of hard and kind of easy.

15
00:01:01,640 --> 00:01:06,490
It's kind of hard because there's going to be a couple of moving pieces here and a little bit of magic.

16
00:01:06,740 --> 00:01:11,780
But at the same time it's going to be a little bit easy because as long as you learn the pattern doing

17
00:01:11,780 --> 00:01:14,050
the validation is going to be an absolute snap.

18
00:01:14,420 --> 00:01:14,670
OK.

19
00:01:14,690 --> 00:01:18,500
Sort of walk us through this process we're going to take a look at this diagram here.

20
00:01:18,590 --> 00:01:20,190
Now the diagram is a little bit confusing.

21
00:01:20,240 --> 00:01:22,770
So we're not going to go over the entire diagram right away.

22
00:01:22,790 --> 00:01:28,120
Instead we'll go over it part by part and then write out some code for each step inside of here.

23
00:01:28,600 --> 00:01:29,090
OK.

24
00:01:30,600 --> 00:01:35,140
So the first thing to note here is that your form is going to be validated by redux form.

25
00:01:35,220 --> 00:01:38,900
Just about every millisecond of the day you could possibly imagine.

26
00:01:38,910 --> 00:01:39,560
Not really.

27
00:01:39,630 --> 00:01:44,580
But essentially every single time that the form is initially rendered to the screen and every single

28
00:01:44,580 --> 00:01:49,830
time that the user interacts with the form so it interacts with the form can be like selecting input

29
00:01:50,280 --> 00:01:53,910
or typing in a character or selecting out of that input.

30
00:01:53,910 --> 00:01:59,550
Just about every interaction you can imagine that occurs with your form redux form is going to attempt

31
00:01:59,550 --> 00:02:01,520
to validate your inputs.

32
00:02:01,920 --> 00:02:08,430
So at every one of those little events redux form is going to call a function automatically called validate

33
00:02:08,910 --> 00:02:14,280
you and I have to define this validate function validate function is going to be called with all the

34
00:02:14,280 --> 00:02:19,500
current values in the form of validate function is going to be essentially our opportunity to check

35
00:02:19,500 --> 00:02:23,120
to see if the user entered isn't valid or invalid input.

36
00:02:23,140 --> 00:02:26,160
So let's define this validate function really quickly.

37
00:02:26,160 --> 00:02:28,190
I'm going to flip back over to my code editor.

38
00:02:28,320 --> 00:02:30,510
I'm going to go back down to the very bottom of the file.

39
00:02:30,510 --> 00:02:34,620
So this is not a function we are going to define inside of our component class.

40
00:02:34,620 --> 00:02:39,110
Instead of going to define it outside the class right above the export default statement.

41
00:02:39,360 --> 00:02:45,750
So I'll say Konst validate and this thing is going to be called with a form values object form values

42
00:02:45,750 --> 00:02:49,960
is going to contain all the different values that exist inside of our form.

43
00:02:50,010 --> 00:02:55,860
So as we saw just a moment ago when we type in some input here and then submit this form we saw that

44
00:02:55,890 --> 00:03:01,030
we had this form values object right here with a key of the field name title.

45
00:03:01,170 --> 00:03:06,420
Again that is title right there because we specified the name title on the field and we have a key value

46
00:03:06,420 --> 00:03:07,520
pair of description.

47
00:03:07,560 --> 00:03:13,390
Again we see description because we provided a name of description to our second field.

48
00:03:13,410 --> 00:03:15,950
Now we see the appropriate text for each property.

49
00:03:15,990 --> 00:03:20,890
So this exact same object is going to show up inside of our validate function right here.

50
00:03:21,160 --> 00:03:26,040
So now this is going to be our opportunity to actually validate those foreign values.

51
00:03:26,040 --> 00:03:29,320
All right let's flip back over to the diagram and walk to the next step.

52
00:03:29,850 --> 00:03:34,890
So inside of validate we're going to essentially check to see if a user entered in any valid values

53
00:03:34,890 --> 00:03:36,350
for those different inputs.

54
00:03:36,360 --> 00:03:40,120
We're going to do that by inspecting the form values object.

55
00:03:40,290 --> 00:03:44,190
This series of inspections that we're gonna do here to see if a user entered invalid input is going

56
00:03:44,190 --> 00:03:45,400
to be very basic.

57
00:03:45,400 --> 00:03:52,380
Essentially we just have to write out if statements will say if there is no form value is not title

58
00:03:52,380 --> 00:03:52,930
property.

59
00:03:52,980 --> 00:03:58,620
So that would do a check to see if a user entered in a title or not if they did not enter in a title

60
00:03:58,650 --> 00:04:01,110
form values that title would be undefined.

61
00:04:01,110 --> 00:04:10,020
And so the body of the if statement will only Rayyan if the user did not enter a title.

62
00:04:10,020 --> 00:04:12,830
So that's how we're going to do very basic validation.

63
00:04:12,870 --> 00:04:18,930
So after we do a series of statements like that where if a user entered an all valid inputs then all

64
00:04:18,930 --> 00:04:22,860
we're going to do from this validate function is return an empty object.

65
00:04:22,890 --> 00:04:28,110
When we return an empty object that essentially tells redux form that nothing is wrong with our form

66
00:04:28,200 --> 00:04:31,690
and it's completely valid and the user can submit it if they want to.

67
00:04:31,890 --> 00:04:36,720
Now if a user did anything incorrectly then we're going to return an object.

68
00:04:36,720 --> 00:04:39,360
And this is where things get just a little bit complicated.

69
00:04:39,450 --> 00:04:45,450
So we're going to return an object if a user entered in anything incorrectly for each invalid field

70
00:04:45,480 --> 00:04:46,660
that the user entered.

71
00:04:46,890 --> 00:04:52,260
We're going to put a key value pair on an object with the name of the fields that the user entered in

72
00:04:52,260 --> 00:04:55,740
incorrectly and an error message to show to the user.

73
00:04:55,890 --> 00:05:02,970
So for example if the user entered in an invalid title we're going to create and return an objects that

74
00:05:02,970 --> 00:05:04,210
looks like this over here.

75
00:05:04,320 --> 00:05:09,050
It's going to be an object that has a title property and it has a string containing the error message

76
00:05:10,190 --> 00:05:14,210
when redux form sees this object right here that has a key value pair inside of it.

77
00:05:14,210 --> 00:05:18,710
It's going to say oh I see that there is a value inside this object that means that the user must have

78
00:05:18,710 --> 00:05:20,810
done something incorrectly number.

79
00:05:20,880 --> 00:05:25,670
If we return empty object from validate redux form assumes that everything went OK.

80
00:05:25,700 --> 00:05:30,650
So it's only when we put a key value pair into this object that redux form realizes that something just

81
00:05:30,650 --> 00:05:32,840
went a little bit wrong.

82
00:05:32,840 --> 00:05:35,600
All right let's write a little bit of code for this step right here.

83
00:05:36,370 --> 00:05:42,070
So back inside my validate function at the very top of it I'm going to define an object called errs

84
00:05:42,070 --> 00:05:43,290
like so.

85
00:05:43,300 --> 00:05:48,820
So then inside of validate we will have a series of IF statements each IF statement can check a different

86
00:05:48,820 --> 00:05:50,410
form value property.

87
00:05:50,440 --> 00:05:56,800
Now again if a user did not enter in a title I'm going to say heir's title is some error message like

88
00:05:57,730 --> 00:06:04,050
you must enter a title like so then we can write out another statement to make sure that the user entered

89
00:06:04,050 --> 00:06:05,800
a description as well.

90
00:06:05,800 --> 00:06:14,580
So I'll say if there is no form value description property let's say ersatz description equals you must

91
00:06:14,580 --> 00:06:17,890
enter a description.

92
00:06:18,110 --> 00:06:23,090
And then finally after we create that object we need to make sure that we return it after adding on

93
00:06:23,150 --> 00:06:24,740
all the appropriate properties.

94
00:06:26,000 --> 00:06:31,000
So at the bottom of validate I'm going to return errors like so OK.

95
00:06:31,030 --> 00:06:33,030
So that's our validate function right there.

96
00:06:33,040 --> 00:06:38,290
That's all we have to right now to wire this thing up to redux form and handle any error messages that

97
00:06:38,290 --> 00:06:39,910
need to be shown to the user.

98
00:06:40,000 --> 00:06:43,330
Let's take a quick pause right here and we'll handle that process in the next video.