1
00:00:00,960 --> 00:00:03,590
In the last video we created a Validate function.

2
00:00:03,620 --> 00:00:06,490
Remember this thing is going to be called with all the different values out of our form.

3
00:00:06,520 --> 00:00:11,530
So it's our job to create an Aries object attach any error messages that we might need to show to the

4
00:00:11,530 --> 00:00:16,660
user if they entered in invalid inputs and then we return that is object at the bottom.

5
00:00:16,660 --> 00:00:21,670
Now we need to make sure that this ballot function gets wired up to redux form so that it knows to use

6
00:00:21,670 --> 00:00:23,260
the validate function.

7
00:00:23,260 --> 00:00:27,210
So we're going to take that validate function and we're going to pass it into the redux form helper

8
00:00:27,220 --> 00:00:30,590
down here on a key called validate.

9
00:00:31,020 --> 00:00:34,690
So I'll say validate is the validate function we just created.

10
00:00:34,690 --> 00:00:37,160
Now notice how the key and the value here are identical.

11
00:00:37,210 --> 00:00:40,090
So if we want to we can condense this down to be just validate.

12
00:00:40,100 --> 00:00:42,140
Like so OK.

13
00:00:42,160 --> 00:00:46,880
So now that that is wired up let's go take a look at our diagram one more time.

14
00:00:46,930 --> 00:00:52,000
So we just put together the validate function and we wired it up to our component member.

15
00:00:52,010 --> 00:00:56,710
Valerie is going to be called every single time that the form is initially rendered or the user interacts

16
00:00:56,710 --> 00:00:58,010
with it in any way.

17
00:00:58,960 --> 00:01:04,150
So now our validate function is going to be getting called a whole bunch if we return an object from

18
00:01:04,150 --> 00:01:08,530
that validate function then redux form is going to automatically render our component.

19
00:01:08,700 --> 00:01:13,750
They actually get these messages to appear on the screen redux form is going to take a look at every

20
00:01:13,810 --> 00:01:16,700
field component that gets rendered.

21
00:01:16,860 --> 00:01:19,810
It's going to look at each fields name property.

22
00:01:19,860 --> 00:01:25,810
So remember every field we put right here has a name property it's a redux form is going to look at

23
00:01:25,810 --> 00:01:27,490
this name property right here.

24
00:01:27,640 --> 00:01:33,720
And then it's going to look at the heirs object that we return from validate if a field has the same

25
00:01:33,720 --> 00:01:39,720
name as a property that exists inside that object then redux form is going to take that message and

26
00:01:39,720 --> 00:01:45,240
pass it to or render input function for each field that gets created.

27
00:01:45,240 --> 00:01:48,410
Now that last part right there that is the part that I think is really confusing.

28
00:01:49,450 --> 00:01:56,740
Again the general idea here is that our heirs object has some properties on it that have an identical

29
00:01:56,740 --> 00:02:00,780
name to whatever names we provided to the field properties.

30
00:02:00,790 --> 00:02:05,740
So if the air object has a property name that is identical to this name right here and it contains a

31
00:02:05,740 --> 00:02:10,930
string that error message will be passed down to this render input function.

32
00:02:10,930 --> 00:02:15,690
Let's just try making use of the error message inside of render input and showing it on the screen.

33
00:02:15,700 --> 00:02:19,820
And I think you'll get a better idea of the little connection that's going on here.

34
00:02:19,860 --> 00:02:21,880
It's going to go up to render inputs.

35
00:02:22,030 --> 00:02:25,480
Remember we are destructuring out of that first argument right there.

36
00:02:25,500 --> 00:02:30,640
I'm going to do structure off one additional property and this one has a kind of strange name its name

37
00:02:30,670 --> 00:02:32,000
is Middx.

38
00:02:32,230 --> 00:02:37,600
So I'm going to take that up property and I'm going to cancel log it out any time that render input

39
00:02:37,600 --> 00:02:38,560
is called.

40
00:02:38,920 --> 00:02:43,660
So I'm going to save this now I will flip back over to our application OK.

41
00:02:43,660 --> 00:02:45,460
I see two council logs right here.

42
00:02:45,460 --> 00:02:50,620
The reason we see two is because we are calling render input twice once for each field component that

43
00:02:50,620 --> 00:02:54,780
gets created to the consulate that we see right here is the Met property.

44
00:02:54,910 --> 00:02:56,370
So we can now expand these.

45
00:02:56,380 --> 00:03:00,780
And you'll notice that each one here is the second one has a property attached to it.

46
00:03:00,940 --> 00:03:04,200
And the area is the error message that we returned from validate.

47
00:03:04,630 --> 00:03:06,960
So there's the error message for description.

48
00:03:07,030 --> 00:03:13,920
And here's the error message for title so now we can take these mega dot error properties and attempt

49
00:03:13,920 --> 00:03:17,060
to show them on the screen underneath each text input.

50
00:03:17,070 --> 00:03:21,370
Now just one last time before we do that I just want to reiterate one more time here.

51
00:03:21,390 --> 00:03:26,430
Remember the big connection between the validate function and getting the message in to render input

52
00:03:26,610 --> 00:03:29,160
is all about the field name right here.

53
00:03:29,160 --> 00:03:34,500
So because this name is title and because we returned an object from validates with a title property

54
00:03:34,740 --> 00:03:39,670
that your message shows up inside of render input that is the big connection between the two.

55
00:03:39,800 --> 00:03:44,640
And I apologize for the repetition here but again I get a lot of questions about this topic so I just

56
00:03:44,640 --> 00:03:46,760
want make sure it's really clear from the get go.

57
00:03:47,160 --> 00:03:51,130
OK so now to show this error message on the screen we can remove the console log.

58
00:03:52,870 --> 00:04:00,650
And underneath our input I'll place a div and it will print out meta dot air like so.

59
00:04:00,960 --> 00:04:03,070
So now we can save this while flip back over.

60
00:04:03,110 --> 00:04:05,870
And we should see our error messages appear.

61
00:04:05,870 --> 00:04:06,100
All right.

62
00:04:06,110 --> 00:04:10,110
So I see you must enter a title and you must enter the description member.

63
00:04:10,110 --> 00:04:14,770
Our validation is going to be ran on the instant this form is rendered on the screen or anytime that

64
00:04:14,780 --> 00:04:16,700
the user interacts with the form.

65
00:04:16,700 --> 00:04:21,560
So in some cases we are probably not going to want to show an error message to the user right away when

66
00:04:21,560 --> 00:04:23,050
they first look at the form.

67
00:04:23,060 --> 00:04:26,810
Usually we only want to show an error message after they try to submit the form.

68
00:04:26,830 --> 00:04:28,660
And there's something wrong with it.

69
00:04:28,700 --> 00:04:29,830
We'll figure out how we do that.

70
00:04:29,930 --> 00:04:30,760
Just a little bit.

71
00:04:30,800 --> 00:04:35,760
But right now we're just going to try to make sure that the form air message shows up correctly.

72
00:04:36,150 --> 00:04:36,370
OK.

73
00:04:36,380 --> 00:04:41,210
So I see you must enter a title here but as soon as I enter some text in that your message goes away

74
00:04:41,970 --> 00:04:43,470
I see the error message here as well.

75
00:04:43,520 --> 00:04:46,900
So I can enter some text in and the error message goes away as well.

76
00:04:47,360 --> 00:04:52,460
So once again every single time your user interacts with the form the validate function gets called

77
00:04:52,580 --> 00:04:56,480
and it's going to validate all the form inputs OK.

78
00:04:56,490 --> 00:05:00,070
So that's pretty much basic validation.

79
00:05:00,110 --> 00:05:04,080
Now we'll take a quick pause right here when we come back the next section we're going to first make

80
00:05:04,080 --> 00:05:08,760
sure that we only show these error messages to the user after they attempt to submit the form.

81
00:05:08,760 --> 00:05:13,410
So again if I just refresh the page and we are essentially telling the user they're doing something

82
00:05:13,410 --> 00:05:14,880
wrong right away.

83
00:05:14,970 --> 00:05:16,750
That's not really helpful for a user.

84
00:05:16,740 --> 00:05:21,610
So we only one show an error message after the user attempts to submit the form.

85
00:05:21,810 --> 00:05:24,770
So quick pause and we'll sort of take care of that in the next video.