1

00:00:01,200  -->  00:00:04,520
So far our form can successfully create new records.

2

00:00:04,710  -->  00:00:10,260
But you may have noticed in the last section that we were able to successfully create a record without

3

00:00:10,290  -->  00:00:12,250
any data in this field right here.

4

00:00:12,300  -->  00:00:17,150
And if I wanted to you could even create one without a title or a content as well.

5

00:00:17,220  -->  00:00:22,380
We really need to make sure that each input in our form has some amount of data in it before the user

6

00:00:22,380  -->  00:00:23,360
can submit it.

7

00:00:23,520  -->  00:00:26,200
Again this process is called form validation.

8

00:00:26,400  -->  00:00:32,910
We need to validate the form before it can be submitted form validation is another feature that can

9

00:00:32,910  -->  00:00:36,700
be handled by redux form to do form validation.

10

00:00:36,720  -->  00:00:45,780
We're going to create a new function in here in our component that will be called whenever the form

11

00:00:45,780  -->  00:00:51,900
needs to be validated depending on what we return from this function redux form will either mark the

12

00:00:51,900  -->  00:00:53,960
form as valid or invalid.

13

00:00:53,970  -->  00:00:56,540
So let's go ahead and give it a shot.

14

00:00:57,270  -->  00:01:04,110
So underneath our component I'm going to define a new function called validate and validate is going

15

00:01:04,110  -->  00:01:08,670
to be called with the values from the form.

16

00:01:08,730  -->  00:01:14,400
Right now we're going to handle the simple case in which all the form's values are just 100 percent

17

00:01:14,400  -->  00:01:16,020
valid.

18

00:01:16,020  -->  00:01:21,510
We'll do that by creating a new object here called errors and we'll talk about what this object is for

19

00:01:21,510  -->  00:01:22,590
in a second.

20

00:01:22,800  -->  00:01:26,160
And we'll just immediately return it like so.

21

00:01:26,730  -->  00:01:28,430
So validate gets called.

22

00:01:28,430  -->  00:01:30,960
It has some values from the form.

23

00:01:30,960  -->  00:01:34,700
We create a new object and we just pass it back.

24

00:01:35,550  -->  00:01:40,560
Now we need to make sure that redux form actually uses this validation function.

25

00:01:40,560  -->  00:01:44,390
We do that by just adding it to the configuration object down here.

26

00:01:44,460  -->  00:01:50,760
So I'll add a comma and it will add validate validate being the function we just created right here

27

00:01:50,780  -->  00:01:52,410
.

28

00:01:53,950  -->  00:01:54,630
OK.

29

00:01:55,020  -->  00:02:00,960
Let's add a little bit of validation for the title and then talk about what exactly is going on.

30

00:02:00,960  -->  00:02:01,620
So we'll do.

31

00:02:01,650  -->  00:02:02,160
If

32

00:02:04,950  -->  00:02:08,650
values not title does not exist.

33

00:02:09,120  -->  00:02:15,310
Title enter a user name.

34

00:02:15,340  -->  00:02:22,830
Now if the title isn't defined so we have not values that title that means if the title does not exist

35

00:02:22,830  -->  00:02:31,350
if it's no undefined falsie you know whatever add a property to the object with the key title that says

36

00:02:31,440  -->  00:02:33,810
enter a user name.

37

00:02:33,840  -->  00:02:37,120
So here's how validation with redux form works.

38

00:02:37,260  -->  00:02:46,110
We return an object from the validate function if the object has a key that matches one of our field

39

00:02:46,110  -->  00:02:46,990
names.

40

00:02:47,040  -->  00:02:56,700
You can see right here we've got title title and that key has a object tied to it or a you know a truthy

41

00:02:56,700  -->  00:03:02,610
object too tied to it be the string or the value true or you know anything whatsoever.

42

00:03:02,610  -->  00:03:09,090
Redux form assumes that the form is not valid and so it doesn't allow you to show or to submit the form

43

00:03:09,090  -->  00:03:16,760
in and also adds a couple of properties to the fields a configuration object up here.

44

00:03:17,070  -->  00:03:20,100
So again if you want to mark the form as invalid.

45

00:03:20,100  -->  00:03:27,300
All we need to do is add a property to the heirs object that we return and we just add a truthy value

46

00:03:27,300  -->  00:03:28,000
to it.

47

00:03:28,020  -->  00:03:33,940
In this case I added the actual error message that we want to display enter a user name.

48

00:03:33,960  -->  00:03:38,810
So next we're going to go ahead and consume that air inside of our render method up here.

49

00:03:38,820  -->  00:03:43,020
We want to show the user hey like you just did something invalid.

50

00:03:43,020  -->  00:03:44,760
You need to fix this.

51

00:03:45,000  -->  00:03:54,870
So I don't need the input I'm going to add another div with the class name of text help and then inside

52

00:03:54,870  -->  00:03:57,960
of your all do title.

53

00:03:58,060  -->  00:04:03,970
Err the title right here is again coming from the fields object here in the air.

54

00:04:04,050  -->  00:04:10,320
Property is going to be the text that we returned down here in our validate function.

55

00:04:11,090  -->  00:04:12,490
So let's go ahead and give this a shot.

56

00:04:12,630  -->  00:04:16,180
You saved the form.

57

00:04:17,150  -->  00:04:23,220
I'm going to refresh the browser and you'll notice that right here off the bat I see the error message

58

00:04:23,310  -->  00:04:25,650
enter user name.

59

00:04:25,770  -->  00:04:29,700
So by default redux form considers the foreign to be invalid.

60

00:04:29,730  -->  00:04:32,160
You know there's no no content in here.

61

00:04:32,160  -->  00:04:35,040
Therefore the form is not valid at all.

62

00:04:35,040  -->  00:04:42,120
You'll notice that if I enter some context or some content the validation error automatically goes away

63

00:04:42,140  -->  00:04:42,350
.

64

00:04:42,540  -->  00:04:49,620
So whenever we change the form in any way shape or fashion the validate function immediately runs again

65

00:04:50,130  -->  00:04:51,950
and validates the form.

66

00:04:51,960  -->  00:04:56,850
And in this case since we added some content here the form is now valid.

67

00:04:56,850  -->  00:04:58,810
And so the error message went away.

68

00:04:59,070  -->  00:05:06,630
So I can delete that content and you'll see that it pops back up late so the validate function also

69

00:05:06,630  -->  00:05:08,540
prevents the form from being submitted.

70

00:05:08,580  -->  00:05:14,550
So if the form is currently invalid which it is right now I can click submit here and you'll see that

71

00:05:14,550  -->  00:05:19,820
I'm not getting any network requests in my network requests log over here.

72

00:05:20,070  -->  00:05:25,680
So if the form is not valid I can't submitted so very handy you know keeps the user from prematurely

73

00:05:25,680  -->  00:05:27,400
trying to submit a form.

74

00:05:28,050  -->  00:05:34,350
OK so that's kind of the you know low level rundown on how the validation is working here.

75

00:05:34,590  -->  00:05:39,210
What we do want to make sure is that when the user first enter or opens a form up we don't really want

76

00:05:39,210  -->  00:05:40,740
to you know scold them right away.

77

00:05:40,740  -->  00:05:43,250
We don't want to tell them hey you did something wrong.

78

00:05:43,320  -->  00:05:50,460
We want to make sure that they actually you know touch the form in some way enter some texts before

79

00:05:50,460  -->  00:05:52,740
they before we showed them any error message.

80

00:05:53,010  -->  00:05:59,880
So to handle that redux form gives us another little helper on the title object here on the field configuration

81

00:05:59,880  -->  00:06:08,940
object called touched and what Touch does for us is it is a property that is false until the user touches

82

00:06:08,940  -->  00:06:14,370
the field in some way and so that means they click into it and then they click out or they click into

83

00:06:14,370  -->  00:06:20,250
it and enter some text you know basically they have in some way modified that form.

84

00:06:20,700  -->  00:06:22,760
Or excuse me that particular input.

85

00:06:23,040  -->  00:06:30,120
So we'll use that touched property to gauge whether or not we so this title dot air right here.

86

00:06:30,480  -->  00:06:34,870
So to do that we're going to use a javascript ternary expression.

87

00:06:35,160  -->  00:06:40,820
If you're not familiar with churn areas no problem we're going to do it here very slowly.

88

00:06:41,100  -->  00:06:48,640
So first with the turn Airi will write a single expression that evaluates to either true or false.

89

00:06:48,750  -->  00:06:54,810
So title that touched member touched is a property that we get for free from redux form it just means

90

00:06:54,810  -->  00:07:02,490
hey as a user touches import input in some fashion then we'll add a question mark here with the space

91

00:07:02,490  -->  00:07:03,790
on either side.

92

00:07:04,050  -->  00:07:07,910
And then we'll put an expression to return.

93

00:07:08,150  -->  00:07:09,980
If the first expression is true.

94

00:07:10,020  -->  00:07:15,640
So if titled touched is true it will return titled dot air.

95

00:07:16,380  -->  00:07:23,570
If title not touched is false will add a colon over here and then we'll add another expression in.

96

00:07:23,580  -->  00:07:25,370
So this is a tertiary right here.

97

00:07:25,380  -->  00:07:28,450
If titled touched is true return titled.

98

00:07:28,510  -->  00:07:31,500
Err if it's false return empty string.

99

00:07:31,500  -->  00:07:34,580
In other words just don't show anything at all.

100

00:07:35,700  -->  00:07:41,980
OK so I'm going to go ahead and save this and let's go ahead and give it a sot in the browser so I refresh

101

00:07:41,980  -->  00:07:42,000
.

102

00:07:42,000  -->  00:07:47,130
You'll notice that the error message isn't here anymore because I haven't yet touched the form.

103

00:07:47,130  -->  00:07:53,850
Now all click into it and then I'll just immediately click out that counts as having touched the form

104

00:07:53,850  -->  00:07:55,120
that means hey the user like.

105

00:07:55,120  -->  00:08:00,000
Tried to do something here but they kind of did a bad job of it so we should probably let them know

106

00:08:00,000  -->  00:08:04,080
that they did something bad and show them an error message.

107

00:08:04,110  -->  00:08:07,470
So again I'll refresh right now titled.

108

00:08:07,530  -->  00:08:09,180
Touched is false.

109

00:08:09,240  -->  00:08:10,960
So we're not showing any content.

110

00:08:11,010  -->  00:08:19,010
I click in click out titled Not touched is now true and so we show the validation error right here.

111

00:08:20,370  -->  00:08:23,680
So pretty straightforward but very powerful.

112

00:08:23,700  -->  00:08:27,880
Let's go ahead and continue with the other fields in the next section.