1
00:00:00,560 --> 00:00:05,550
In the last section we made use of the Medhat property that is being passed to every one of our survey

2
00:00:05,550 --> 00:00:08,730
fields to get some validation message to show up on the screen.

3
00:00:08,910 --> 00:00:11,340
However the validation still looks pretty ugly.

4
00:00:11,340 --> 00:00:13,060
So let's tackle that to start.

5
00:00:13,470 --> 00:00:15,140
There's two things or maybe three things.

6
00:00:15,150 --> 00:00:18,420
Let's say three things that we should probably take care of in in here.

7
00:00:18,420 --> 00:00:23,230
First off there's a real big gap between the actual input and the Validation Text.

8
00:00:23,280 --> 00:00:28,240
There's probably not enough of a gap between the Validation Text and the label for the next field.

9
00:00:28,470 --> 00:00:35,490
And then in addition the validation testing text itself should really appear as read to catch the users.

10
00:00:36,300 --> 00:00:40,830
So I think that to address this we can wrap the error message that we're showing right here inside of

11
00:00:40,830 --> 00:00:45,030
a DIV tag and add some styling or a class name to the div.

12
00:00:45,210 --> 00:00:50,490
We'll first take care of making sure that the text appears with the correct color of red by adding a

13
00:00:50,490 --> 00:00:59,730
class name of red dash text next we can fix some styling of this thing and make sure that it has more

14
00:00:59,730 --> 00:01:01,230
space underneath it.

15
00:01:01,380 --> 00:01:08,080
By adding on a style of margin bottom of 20 picks.

16
00:01:08,160 --> 00:01:10,430
So it's going to put some space right underneath it.

17
00:01:10,590 --> 00:01:16,800
And then finally we'll make sure that there is not too much space above it by decreasing the amount

18
00:01:16,800 --> 00:01:21,800
of margin that the input tag has to be clear all that extra space in there.

19
00:01:21,810 --> 00:01:24,320
That's all coming is Marjan from the input itself.

20
00:01:24,330 --> 00:01:28,420
So we're going to shrink down that margin on the input input.

21
00:01:28,650 --> 00:01:35,970
We'll add on the style as well with margin bottom and we'll give it 5 picks.

22
00:01:36,080 --> 00:01:38,070
So that still has a little bit of standoff.

23
00:01:38,070 --> 00:01:39,140
Let's see how that looks.

24
00:01:41,100 --> 00:01:41,540
OK.

25
00:01:41,640 --> 00:01:42,730
So we refreshed now

26
00:01:46,470 --> 00:01:51,080
and then as soon as the form loads up we're going to submit it again.

27
00:01:52,360 --> 00:01:54,460
And it looks way more reasonable than before.

28
00:01:54,460 --> 00:01:55,810
That's looking pretty good.

29
00:01:55,810 --> 00:01:57,180
So I'm pretty happy with this.

30
00:01:57,190 --> 00:02:02,620
I think that we can now go back to our validation function and add in a little bit more validation for

31
00:02:02,620 --> 00:02:04,670
all the other fields as well.

32
00:02:04,690 --> 00:02:10,150
Now the other fields in some cases are really straightforward but in some cases a little bit more complicated

33
00:02:10,150 --> 00:02:10,910
logic.

34
00:02:11,170 --> 00:02:17,470
So the Servi title really the only thing I care about here is that a title is provided for all I care.

35
00:02:17,480 --> 00:02:21,350
Our users can put in absolutely any text that they want to use.

36
00:02:21,430 --> 00:02:24,550
And really the same thing for the subject line in the email body.

37
00:02:24,640 --> 00:02:30,140
Really all I care about is that the user provides some subject line and an email body.

38
00:02:30,430 --> 00:02:35,730
However remember the recipient list right here is a list of e-mails that we are going to attempt to

39
00:02:35,730 --> 00:02:36,590
e-mail.

40
00:02:36,610 --> 00:02:41,770
So I really want to make sure that the user is providing a well formatted list of emails and that each

41
00:02:41,830 --> 00:02:45,320
individual e-mail is properly formatted as well.

42
00:02:45,640 --> 00:02:47,660
So the first three fields are really pretty straightforward.

43
00:02:47,680 --> 00:02:52,390
But we're going to do a little bit of thinking on how we treat the recipient list here.

44
00:02:52,690 --> 00:02:57,280
Now to add in additional validation rules we're going to go back to the validate function inside of

45
00:02:57,280 --> 00:03:06,690
our survey form component inside of survey form and I'm down inside of the validate function right here.

46
00:03:06,700 --> 00:03:13,990
So again we can really just check all the other values on this values object or the values argument

47
00:03:13,990 --> 00:03:17,900
they passed in and just make sure that the user provided a value.

48
00:03:17,950 --> 00:03:20,360
We really don't care about anything else besides that.

49
00:03:20,470 --> 00:03:26,260
So we can say if no values Daut and we got to remember our property names because we make sure to make

50
00:03:26,260 --> 00:03:27,340
sure we get those right.

51
00:03:27,610 --> 00:03:31,390
So we care about the title subject body and emails.

52
00:03:32,110 --> 00:03:41,530
So if the title if the subject is not provided ersatz subject is you must provide a subject

53
00:03:44,600 --> 00:04:00,460
X and then if values dot body is not provided so body ersatz body equals you must provide a body.

54
00:04:00,870 --> 00:04:01,320
And you know what.

55
00:04:01,320 --> 00:04:06,660
After writing those three it's really clear that this is going to be pretty repetitive right here.

56
00:04:06,660 --> 00:04:08,910
I'm already tired of writing out these if statements.

57
00:04:08,940 --> 00:04:14,570
And so just like we did earlier where we factored all those different fields into a single loop.

58
00:04:14,610 --> 00:04:19,770
My mind is immediately thinking that we can probably do this in a little bit more clever fashion than

59
00:04:19,770 --> 00:04:21,270
what we are doing right now.

60
00:04:21,390 --> 00:04:26,850
So I'm going to suggest that we iterate over the fields object again because this lets out all the different

61
00:04:26,850 --> 00:04:28,260
fields that we have.

62
00:04:28,530 --> 00:04:34,080
We should look at each of the different objects specifically the name property we should use the name

63
00:04:34,080 --> 00:04:39,780
property to reference that airs or seeing the values object and if it doesn't have a value then we should

64
00:04:39,780 --> 00:04:43,260
add some note to the heirs object.

65
00:04:43,260 --> 00:04:43,850
OK.

66
00:04:44,160 --> 00:04:48,330
Now this time around we're not going to be using a map function because we're not trying to return a

67
00:04:48,330 --> 00:04:52,050
list of anything we're trying to modify that airs object.

68
00:04:52,050 --> 00:04:54,950
So this time around we will be using a Each loop.

69
00:04:55,090 --> 00:05:00,610
We're going to say for each field we have run this little validation rule.

70
00:05:01,040 --> 00:05:01,330
OK.

71
00:05:01,380 --> 00:05:06,990
So I'm going to delete everything we have right now because that's all a bunch of just repetitive logic

72
00:05:07,700 --> 00:05:15,430
and we're going to instead use the load ash library again to iterate over that field's object.

73
00:05:15,780 --> 00:05:18,800
Now the each loop works very similarly to the map.

74
00:05:18,810 --> 00:05:24,650
So for every field inside of the fields array we're going to run this arrow function right here will

75
00:05:24,660 --> 00:05:30,540
be passed in the object or the fields from the fields array and we can reference the name property on

76
00:05:30,540 --> 00:05:32,770
there to look at the Values object.

77
00:05:32,790 --> 00:05:34,840
So let's see what this looks like in practice.

78
00:05:35,190 --> 00:05:38,700
Now I can already tell you I don't need the entire field object.

79
00:05:38,730 --> 00:05:41,340
I only really care about the name on each field.

80
00:05:41,400 --> 00:05:45,350
So again we'll do some destructuring to pull off just the name.

81
00:05:45,840 --> 00:05:52,710
Now to look and see if the values object contains a value for the property name.

82
00:05:52,710 --> 00:06:00,030
We can say if there is nothing at values square braces square brackets whatever you wanna call it name

83
00:06:00,570 --> 00:06:02,960
then run the code inside of here.

84
00:06:02,980 --> 00:06:05,460
Now people sometimes get a little bit confused about this.

85
00:06:05,460 --> 00:06:12,210
Remember this is going back to like javascript 101 to reference a property on an object like on the

86
00:06:12,210 --> 00:06:14,250
fly or to figure out the property name.

87
00:06:14,280 --> 00:06:17,370
At runtime we use the square brackets.

88
00:06:17,400 --> 00:06:23,760
So if we just said values not name that we would be looking up specifically like just the name property.

89
00:06:23,760 --> 00:06:26,940
Like literally the string name on the values object.

90
00:06:26,940 --> 00:06:30,450
So I mean like name equals you know whatever right here.

91
00:06:30,450 --> 00:06:32,830
And we don't care about anything called name.

92
00:06:32,880 --> 00:06:36,570
We want to figure out the key that we're trying to look at every single time that we run through this

93
00:06:36,570 --> 00:06:37,320
loop.

94
00:06:37,320 --> 00:06:42,780
So instead we use the square brackets syntax right here to say hey on the fly we're going to figure

95
00:06:42,780 --> 00:06:47,380
out what value or what property on the values object we're trying to look at.

96
00:06:48,030 --> 00:06:48,300
OK.

97
00:06:48,330 --> 00:06:54,690
So again if this property doesn't have a value assigned to it we're going to add one to the heirs object.

98
00:06:54,780 --> 00:07:01,350
So we're going to say on the air object on the Name property or you know whatever it is that this current

99
00:07:01,380 --> 00:07:05,820
iteration through the loop we're going to provide some error message.

100
00:07:05,820 --> 00:07:11,670
So now that we have this kind of each syntax here we don't really have as much control over really customizing

101
00:07:11,670 --> 00:07:13,260
the error message quite as easily.

102
00:07:13,380 --> 00:07:17,460
So we're going to put on a little bit more custom error message or still be a little bit more generic

103
00:07:17,490 --> 00:07:23,820
error message and just say something like you must provide a value like so.

104
00:07:24,190 --> 00:07:29,770
Now I do want to say if you want to customize the error message is being provided for each individual

105
00:07:29,770 --> 00:07:30,540
field.

106
00:07:30,550 --> 00:07:35,050
One option that you could take and I'm just going to throw this out there you could go back up to the

107
00:07:35,050 --> 00:07:42,370
fields object and you can say like you know no value air or something like that and then assigned to

108
00:07:42,370 --> 00:07:53,560
it a string of provide a survey title and then down inside of the for loop we can set the no value error

109
00:07:54,730 --> 00:07:56,630
value on there.

110
00:07:56,950 --> 00:08:03,820
So we'll take in no value air and it will say rather than using the super generic string use the error

111
00:08:03,820 --> 00:08:07,160
message that I customized for this very particular field.

112
00:08:07,180 --> 00:08:10,360
So I just want to run out there you can really take this entire approach.

113
00:08:10,360 --> 00:08:11,880
A lot of different directions.

114
00:08:11,940 --> 00:08:16,110
It can easily be customized to fit whatever it is you're trying to do.

115
00:08:16,480 --> 00:08:20,040
But for me I'm pretty happy with just a very generic error message.

116
00:08:20,050 --> 00:08:24,290
So I just undid all those last couple lines I wrote.

117
00:08:24,310 --> 00:08:24,690
OK.

118
00:08:24,730 --> 00:08:25,450
So here we go.

119
00:08:25,600 --> 00:08:29,040
We are now validating each value and making sure that has been provided.

120
00:08:29,160 --> 00:08:31,930
Well that's not really enough for that e-mail recipients list.

121
00:08:31,930 --> 00:08:35,740
Remember we had said that this has to be a list of emails.

122
00:08:35,800 --> 00:08:40,810
They probably have to be separated by like some special character like a comma or something like that.

123
00:08:40,930 --> 00:08:44,140
And then every e-mail we need to make sure is valid.

124
00:08:44,140 --> 00:08:46,860
So let's take care of that in the next section.

125
00:08:47,040 --> 00:08:52,920
Right now we can just test out our form by clicking into each field and then clicking out.

126
00:08:52,960 --> 00:08:56,030
And you'll notice that each one says you must provide a value.

127
00:08:56,320 --> 00:09:01,360
If we go back and out of value then the air immediately goes away because we've satisfied the validation

128
00:09:01,360 --> 00:09:02,680
logic.

129
00:09:03,240 --> 00:09:03,490
OK.

130
00:09:03,490 --> 00:09:04,540
So I think this is looking good.

131
00:09:04,540 --> 00:09:05,290
Let's take a break.

132
00:09:05,290 --> 00:09:08,370
When we come back we're going to tackle validation on our e-mail list.