1
00:00:00,820 --> 00:00:03,840
In the last video we worked on our air messaging just a little bit.

2
00:00:03,880 --> 00:00:06,680
Now it probably appears that the message is not showing up.

3
00:00:06,700 --> 00:00:10,040
But like I said this is all because of semantic UI.

4
00:00:10,120 --> 00:00:14,320
So in order to get that erimus to show up we just have to do a little bit of work here it's not.

5
00:00:14,330 --> 00:00:20,050
I mean the worst thing in the world essentially our forum right here inside the render method.

6
00:00:20,140 --> 00:00:23,280
It just needs to have a class name of air.

7
00:00:23,290 --> 00:00:27,990
If that thing has a class name of error than any error messages inside the form are going to be displayed.

8
00:00:28,060 --> 00:00:31,260
But if it doesn't have a class name for air we're not going to see any errors at all.

9
00:00:31,270 --> 00:00:33,430
They're all going to be hidden by default.

10
00:00:33,430 --> 00:00:40,100
So all we really do here is put on a class name of air and then we can save this flip back over.

11
00:00:40,330 --> 00:00:43,790
And now again I'm going to select one of my text inputs and then click out.

12
00:00:43,910 --> 00:00:47,460
And now I successfully see my message OK.

13
00:00:47,480 --> 00:00:48,470
That's pretty much it.

14
00:00:48,470 --> 00:00:52,760
We can also click into description click out and we see the error message.

15
00:00:52,770 --> 00:00:56,690
So now we can go back and each one enter in some text and the errors go away.

16
00:00:56,690 --> 00:01:01,940
Likewise if I refreshed the page entirely I have a fresh form right here and if I click on submit without

17
00:01:01,940 --> 00:01:06,910
touching either field each field is going to show the error message as well.

18
00:01:07,840 --> 00:01:09,850
OK so that's pretty much it for validation.

19
00:01:09,850 --> 00:01:13,220
So we now know how to show an error message to the user.

20
00:01:13,240 --> 00:01:18,700
Now one last thing I want to do in here very quickly just for fun just to make this field look a little

21
00:01:18,700 --> 00:01:19,170
bit better.

22
00:01:19,180 --> 00:01:25,540
The form look a little bit better if we go back to our Rander input right here.

23
00:01:25,540 --> 00:01:29,000
Notice how we have a div with the class name field.

24
00:01:29,050 --> 00:01:36,850
So if we want to we can actually add a nother class name to the thing of air like so if the div with

25
00:01:36,850 --> 00:01:42,550
the field custom field has also the class name air then the entire text input and the label are going

26
00:01:42,550 --> 00:01:44,070
to show up as red as well.

27
00:01:44,080 --> 00:01:48,440
Is that just kind of helps our user figure out what is wrong precisely inside the form.

28
00:01:48,460 --> 00:01:53,440
Of course we don't want to show those as read all the time so we can do a little bit of logic to decide

29
00:01:53,500 --> 00:01:56,230
whether or not we want to show that error message.

30
00:01:56,230 --> 00:02:02,700
So essentially I'm going to remove that and I'll say something like I don't know Konst class name above

31
00:02:02,970 --> 00:02:06,840
and then we'll do a little yes 20:15 syntax here.

32
00:02:06,840 --> 00:02:11,110
So I'm going to use a template string with back ticks as opposed to single quotes.

33
00:02:11,150 --> 00:02:15,450
Now I'll say field and then I'll do a little bit of string interpolation here.

34
00:02:15,660 --> 00:02:25,230
So I'll say if Metta air and touched so if both these things are true or truth values then from this

35
00:02:25,230 --> 00:02:28,590
ternary expression that I put right here I'm going to return this string error.

36
00:02:28,980 --> 00:02:32,150
Otherwise I'm going to return a empty string like so.

37
00:02:35,030 --> 00:02:40,980
So then I can reference that variable for my div class name as opposed to just the plain field.

38
00:02:41,150 --> 00:02:42,810
They'll say a class name like so.

39
00:02:44,020 --> 00:02:47,480
All right so I'll save this and we can flip back over.

40
00:02:47,590 --> 00:02:51,880
And now I don't see any error here by default but when I click on it and click out I not only get the

41
00:02:51,880 --> 00:02:54,600
error message but the field is also appearing red as well.

42
00:02:54,670 --> 00:02:57,320
So it's really clear to the user exactly what's going wrong.

43
00:02:58,060 --> 00:02:58,320
OK.

44
00:02:58,340 --> 00:02:59,920
That looks pretty good.

45
00:02:59,980 --> 00:03:01,000
All right I like this.

46
00:03:01,000 --> 00:03:02,210
I think that we're doing great.

47
00:03:02,320 --> 00:03:07,840
So now the last thing we really have to do is start to think about what really happens when we submit

48
00:03:07,840 --> 00:03:08,630
our form.

49
00:03:08,770 --> 00:03:11,700
Yeah we've got the on submit right here to handle submission.

50
00:03:11,800 --> 00:03:16,360
But remember the entire idea behind this form is that we're going to actually create some stream object

51
00:03:16,360 --> 00:03:20,550
or something that represents a user or streaming video to our application.

52
00:03:20,560 --> 00:03:24,640
So let's take a quick pause right here and we come back the next video we're going to start to figure

53
00:03:24,640 --> 00:03:27,250
out exactly what goes on when we submit our form.