1
00:00:00,690 --> 00:00:05,670
We've now got a pretty solid way of making sure that we can get access to the values out of the form

2
00:00:05,730 --> 00:00:10,780
once the user has submitted it we're now going to move back to the validation side of things.

3
00:00:10,800 --> 00:00:16,020
If you recall whenever we refreshed the document we immediately see some validation errors appear to

4
00:00:16,020 --> 00:00:19,370
the user because our inputs are completely empty.

5
00:00:19,500 --> 00:00:20,840
If we enter in some text.

6
00:00:20,880 --> 00:00:24,840
Well the validation runs again with every single keystroke that we make.

7
00:00:25,020 --> 00:00:30,390
And as soon as we start putting in some text we no longer feel the validation rule that checks to see

8
00:00:30,390 --> 00:00:33,540
if any content exists for each of these properties.

9
00:00:33,540 --> 00:00:39,060
So remember the only validation we have right now is to assert that each input has some value assigned

10
00:00:39,060 --> 00:00:40,610
to it.

11
00:00:40,620 --> 00:00:43,500
So clearly this is not the best user experience right now.

12
00:00:43,500 --> 00:00:49,800
We really don't want to show any error message to the user until after they have entered some text and

13
00:00:49,800 --> 00:00:51,140
then tabbed away.

14
00:00:51,150 --> 00:00:56,510
So let's be really clear about that whenever the input first renders on the screen.

15
00:00:56,520 --> 00:01:02,610
So like right now is when I really want to not show any Vitt any error message whatsoever.

16
00:01:02,610 --> 00:01:09,840
It's only once the user starts typing in here and then tabs out or selects another field.

17
00:01:10,350 --> 00:01:14,670
For example I want you to imagine for a second that we still had a validation rule to assert that this

18
00:01:14,670 --> 00:01:19,230
character or the string in here must be at least say three characters long.

19
00:01:19,330 --> 00:01:26,370
So if I start entering character 1 in character 2 like that I do not want to show an error message to

20
00:01:26,370 --> 00:01:30,090
the user just because it's fewer than three characters.

21
00:01:30,120 --> 00:01:36,540
I only want to show that error message once I have selected away from that input really selecting away

22
00:01:36,540 --> 00:01:40,890
from the input means that the user thinks that they're kind of done with that particular input.

23
00:01:40,980 --> 00:01:45,780
And so that makes it a appropriate time to actually run the validation and show an error message to

24
00:01:45,780 --> 00:01:47,600
the user.

25
00:01:47,700 --> 00:01:53,190
So let's review some terminology that it's going to help us figure out exactly what redux form is doing

26
00:01:53,190 --> 00:01:54,390
internally.

27
00:01:54,870 --> 00:01:59,790
So there's three different states of our form that we need to be aware of for each and every field that

28
00:01:59,790 --> 00:02:00,970
we create.

29
00:02:01,260 --> 00:02:05,100
The first state is how every single input is rendered by default.

30
00:02:05,130 --> 00:02:10,950
Like when it first appears on the screen we consider that to be the pristine state so pristine meaning

31
00:02:11,340 --> 00:02:15,960
no input has touched it yet and the user has not yet selected it.

32
00:02:16,050 --> 00:02:20,460
The next one is what's really important for us for solving the error that we're seeing right now and

33
00:02:20,460 --> 00:02:22,720
that is the touch property.

34
00:02:23,010 --> 00:02:28,980
Touch means that a user has selected or focused an input and then focused out of the input.

35
00:02:29,160 --> 00:02:34,290
You can imagine touched as meaning that the user has done some work on this field and now considers

36
00:02:34,290 --> 00:02:35,910
it to be complete.

37
00:02:35,910 --> 00:02:42,640
So for us we really want to get a better handle on when a form or a field gets put into the touch state.

38
00:02:42,690 --> 00:02:51,350
So that would be the state where we render the page I enter some text and then focus away.

39
00:02:51,480 --> 00:02:57,760
I would now consider this input right here to be in the Touched state finally is the invalid state.

40
00:02:57,780 --> 00:03:02,310
And so that's clearly the one where we got some error message and we need to show the message to the

41
00:03:02,310 --> 00:03:03,800
user in some fashion.

42
00:03:04,110 --> 00:03:09,090
So for us what we really care about right now is making sure that we can get our error message display

43
00:03:09,090 --> 00:03:14,610
on here only once the field has entered the Touched state.

44
00:03:14,610 --> 00:03:20,010
So let's go back over to our code editor and I'm going to go up to the render field helper method.

45
00:03:20,610 --> 00:03:22,840
OK so here's render field right here.

46
00:03:23,370 --> 00:03:27,200
So recall that right now we are always showing the error message no matter what.

47
00:03:27,480 --> 00:03:33,250
But we want to show that error message only after the user has touched the field to do so.

48
00:03:33,270 --> 00:03:36,740
We're going to add a ternary expression to this line right here.

49
00:03:36,870 --> 00:03:48,940
So we'll say field dot Mehta touched touched and then a question mark then feel better air than a colon

50
00:03:49,450 --> 00:03:51,090
and then an empty string.

51
00:03:51,160 --> 00:03:56,530
Just a reminder on Turnier expressions with a turner expression everything before the question mark

52
00:03:56,530 --> 00:03:57,610
is evaluated.

53
00:03:57,850 --> 00:04:04,600
If this returns a truthy value then the entire expression resolves with whatever is in between the question

54
00:04:04,600 --> 00:04:06,110
mark in the colon.

55
00:04:06,340 --> 00:04:13,360
If the first part resolves with a falsie value then instead it's resolved with the second or the second

56
00:04:13,360 --> 00:04:16,350
element after or I should say the first element after the colon.

57
00:04:16,360 --> 00:04:19,060
So in this case the empty string right here.

58
00:04:19,270 --> 00:04:24,260
So in effect we're saying if the user has touched this field then show the error.

59
00:04:24,280 --> 00:04:25,320
If one exists.

60
00:04:25,480 --> 00:04:28,080
Otherwise just show an empty string.

61
00:04:28,090 --> 00:04:30,900
The other thing is to make note of this other Mitta property.

62
00:04:30,940 --> 00:04:33,250
So we've already made use of the meta property.

63
00:04:33,310 --> 00:04:37,840
Err right here we're making use of another one that's being tracked internally by redux form called

64
00:04:37,840 --> 00:04:44,050
Dot touched so again touched means the user has focused this input and then focused away from it.

65
00:04:44,620 --> 00:04:46,320
So let's see how we're doing now.

66
00:04:46,660 --> 00:04:50,260
I'm going to save this file and refresh the page.

67
00:04:50,260 --> 00:04:56,090
Now I do not see the error message appear on the screen but if I enter some text in TAB way everything

68
00:04:56,120 --> 00:04:57,340
still fine.

69
00:04:57,340 --> 00:05:04,030
However if I now tab away from this input it will enter the touch state and I would expect to see the

70
00:05:04,030 --> 00:05:05,370
error message appear.

71
00:05:05,450 --> 00:05:09,910
So this is a much more reasonable user experience because we're not just showing them the error message

72
00:05:09,910 --> 00:05:10,840
right away.

73
00:05:10,930 --> 00:05:18,360
We're waiting for them to give us essentially their best effort and then attempt to submit the form.

74
00:05:18,420 --> 00:05:23,700
You'll also notice that if we go ahead and immediately try to submit the form that also causes all the

75
00:05:23,700 --> 00:05:26,790
different fields to be put into the touch state as well.

76
00:05:26,790 --> 00:05:30,640
And so if we refresh the page again and then click on submit.

77
00:05:30,750 --> 00:05:31,160
Cool.

78
00:05:31,200 --> 00:05:35,400
Looks like we're told hey you got to take care of these different validation errors before you go any

79
00:05:35,400 --> 00:05:36,710
further.

80
00:05:36,750 --> 00:05:38,150
So this is looking pretty good.

81
00:05:38,160 --> 00:05:43,290
The last thing I want to take care of as far as validation goes is to make sure that maybe we give this

82
00:05:43,290 --> 00:05:44,810
some red text.

83
00:05:44,880 --> 00:05:51,000
Maybe the error messages should appear with red text and maybe the outlines are used and the inputs

84
00:05:51,000 --> 00:05:55,500
themselves should appear with the red outline as opposed to Grey that it currently has.

85
00:05:55,500 --> 00:06:00,460
So essentially just a little bit of styling to give some better communication to the user and draw their

86
00:06:00,460 --> 00:06:02,960
IDE to the fields that need a little bit of help.

87
00:06:03,330 --> 00:06:06,510
So let's take care of that formatting in the next section.