1
00:00:00,750 --> 00:00:03,800
In the last section we've basically finished up our form.

2
00:00:03,880 --> 00:00:06,990
So you got one last really big thing that we have to be worried about.

3
00:00:07,080 --> 00:00:12,310
A user can enter stuff in right now but we're not really doing any validation of their inputs.

4
00:00:12,420 --> 00:00:16,920
And so I think that would be really nice to make sure that whenever the user enters in a list of email

5
00:00:16,920 --> 00:00:22,230
addresses right here to send this e-mail to to collect some feedback we should probably as soon as possible

6
00:00:22,530 --> 00:00:26,940
validate the emails that were provided and make sure that they're all at least somewhat valid.

7
00:00:27,210 --> 00:00:30,890
Because if the user submits a list of invalid e-mails right here.

8
00:00:31,110 --> 00:00:34,260
Well we're not going to send those e-mails out to anyone.

9
00:00:34,260 --> 00:00:38,310
And then our users are going to be like well what the heck where where's my recipients like where's

10
00:00:38,310 --> 00:00:40,380
my e-mails Where's my survey results.

11
00:00:40,380 --> 00:00:44,670
So it's really gonna be up to us to make sure that we tell our tell our users whether or not they're

12
00:00:44,670 --> 00:00:46,520
providing valid data here.

13
00:00:46,560 --> 00:00:51,610
So again this is really getting into the topic of validation with redux form.

14
00:00:51,660 --> 00:00:55,650
I'm going to flip back over to my code editor inside of my survey form component.

15
00:00:55,740 --> 00:00:59,990
So again I'm inside of survey form inside of survey form.

16
00:01:00,000 --> 00:01:06,960
We added in that redux forum help or at the very bottom we added to it the survey form name right here.

17
00:01:06,960 --> 00:01:11,970
And again we will talk about exactly what this form is doing for us in just a little bit.

18
00:01:12,160 --> 00:01:17,400
Right now I want to talk about one other possible option that we can provide to this object and that

19
00:01:17,400 --> 00:01:20,360
option is called validate.

20
00:01:20,760 --> 00:01:27,660
If we pass in a function under the key validate right here that function will be automatically ran.

21
00:01:27,720 --> 00:01:34,140
Any time the user attempts to submit the form and so we can use that as our opportunity to kind of validate

22
00:01:34,140 --> 00:01:38,670
the different inputs so the user has added and provide feedback to the user to tell them whether or

23
00:01:38,670 --> 00:01:42,370
not they have done basically the right thing.

24
00:01:42,500 --> 00:01:48,950
So right about the redux form tag we're going to define a function called validate.

25
00:01:49,200 --> 00:01:53,340
We're then going to take that function and just like I said we're going to pass it right into the redux

26
00:01:53,340 --> 00:01:55,860
form option object right here.

27
00:01:55,860 --> 00:01:59,540
Now notice that the validate key and value are the same.

28
00:01:59,550 --> 00:02:05,790
So we'll use a little bit of E-6 to condense down to just validate like so and do remember Make sure

29
00:02:05,790 --> 00:02:09,230
to get your sense your comma at the end here.

30
00:02:09,820 --> 00:02:10,130
OK.

31
00:02:10,140 --> 00:02:15,720
So a little bit more on validate now the ability function is kind of interesting in how it works.

32
00:02:15,750 --> 00:02:22,410
It takes a single argument of values and this values thing right here is the object containing all the

33
00:02:22,410 --> 00:02:25,520
different values that are coming off of our form.

34
00:02:25,530 --> 00:02:33,360
So in other words basically an object that looks identical to the object we see when we submit the form

35
00:02:33,360 --> 00:02:34,440
right now.

36
00:02:34,440 --> 00:02:37,100
So that values object looks just like this.

37
00:02:37,140 --> 00:02:39,280
It has the name of each field.

38
00:02:39,600 --> 00:02:42,570
And then the value that is contained inside that field.

39
00:02:42,570 --> 00:02:47,610
So it's pretty easy for us to look inside this object inspect each and every one of these values and

40
00:02:47,610 --> 00:02:49,930
say whether or not they are valid.

41
00:02:50,160 --> 00:02:56,970
Now to communicate back to redux form whether or not these values are valid or not we have to return

42
00:02:57,030 --> 00:03:00,140
an object from this validate function.

43
00:03:00,180 --> 00:03:02,910
So you know is the API here.

44
00:03:02,910 --> 00:03:04,590
Let me just like a quick side note.

45
00:03:04,590 --> 00:03:11,280
The API here is conceptually or like I should say in practice easy but I feel like it's kind of conceptually

46
00:03:11,280 --> 00:03:12,890
difficult to understand what's going on.

47
00:03:12,930 --> 00:03:17,800
So let's slow down a little bit of code and hopefully that will help us understand what's going on.

48
00:03:18,120 --> 00:03:23,760
So at the top of the valley function I'm going to make a object called errors like so.

49
00:03:24,360 --> 00:03:28,130
And at the very bottom I can return that object.

50
00:03:28,320 --> 00:03:35,700
Now if redux form gets that Ayres object back and it is empty redux form assumes that the entire form

51
00:03:35,700 --> 00:03:38,220
is valid and everything is ready and good to go.

52
00:03:38,490 --> 00:03:41,530
So if we just create an empty object and return it right away.

53
00:03:41,560 --> 00:03:44,020
Relax form says fantastic Nowhere's.

54
00:03:44,040 --> 00:03:45,500
Everything is ready to go.

55
00:03:45,570 --> 00:03:52,260
However if the heirs object has any properties or values inside of it then redux form will see those

56
00:03:52,260 --> 00:03:58,800
properties and values and it will assume that the form values must be somehow invalid and so it will

57
00:03:58,800 --> 00:04:00,750
stop the submission process.

58
00:04:01,050 --> 00:04:06,580
So for us in practice what that means is we have to look at this values object very closely.

59
00:04:06,690 --> 00:04:14,070
If the values object has any invalid values inside of it we will then added a value to the heirs object

60
00:04:14,550 --> 00:04:18,380
so that redux form knows that something is wrong here.

61
00:04:18,450 --> 00:04:21,230
So once you see the code here I think life is going to be a lot more straightforward.

62
00:04:21,240 --> 00:04:25,630
So let's just write out the code and hopefully we'll get a better sense of what's going on.

63
00:04:25,710 --> 00:04:30,910
We're going to say we're going to look at the Values object which remember it contains like the body

64
00:04:30,930 --> 00:04:37,290
emails subject and title and we'll start off by looking at the title propertyless to start with title

65
00:04:37,520 --> 00:04:39,280
values title.

66
00:04:39,480 --> 00:04:48,450
We're going to say if a user did not provide a title in the form so if there is no value title then

67
00:04:48,450 --> 00:04:50,010
look at the heirs object.

68
00:04:51,820 --> 00:04:58,690
In on the title property out the text you must provide a title like so.

69
00:04:59,410 --> 00:05:02,420
So this is what we do to validate just one single property.

70
00:05:02,590 --> 00:05:06,040
We look at the heirs objectively and we look at the Values object.

71
00:05:06,040 --> 00:05:11,730
We write some validation around it where we say hey you have to provide a title here if the user did

72
00:05:11,730 --> 00:05:12,990
not provide the title.

73
00:05:13,210 --> 00:05:19,900
Then we add the same property name to the heirs object and assigns that a string that we want to send

74
00:05:19,900 --> 00:05:20,900
back to the user.

75
00:05:21,220 --> 00:05:26,420
So now heir's has a property assigned to it when it gets returned from the validate function redux form

76
00:05:26,420 --> 00:05:29,810
is going to see that property and it's going to say oh this thing must not be valid.

77
00:05:29,860 --> 00:05:32,750
I am not going to allow that form to be submitted.

78
00:05:33,610 --> 00:05:39,520
Now before we go dislike full bore and add in a bunch of additional rules on all the other properties

79
00:05:39,520 --> 00:05:45,180
inside of here I want to take a second to take advantage of this little validation error here.

80
00:05:45,180 --> 00:05:50,020
You know we just wire it in or this little validation rule and I want to figure out how we can communicate

81
00:05:50,020 --> 00:05:54,850
this air back to our user because obviously we want to tell our user what's going wrong.

82
00:05:54,850 --> 00:05:58,900
So I want to figure out how we can communicate this fact to our user.

83
00:05:58,900 --> 00:06:01,240
Now this stuff can sometimes be a little bit complicated.

84
00:06:01,240 --> 00:06:07,300
So you know that's why we're going to take care of this right now right away before we go back and try

85
00:06:07,300 --> 00:06:10,430
to write validation rules around every value.

86
00:06:11,310 --> 00:06:15,580
Now since this is going to be a little bit more of a you know complicated step how will we take a short

87
00:06:15,580 --> 00:06:16,040
break.

88
00:06:16,060 --> 00:06:21,940
When we come back we'll figure out how to get this validation air to show up on the title field in our

89
00:06:21,940 --> 00:06:22,530
form.

90
00:06:22,710 --> 00:06:23,130
Okay.

91
00:06:23,440 --> 00:06:24,930
So I'll see in just a second.