In the last video we worked on our air messaging just a little bit.
Now it probably appears that the message is not showing up.
But like I said this is all because of semantic UI.
So in order to get that erimus to show up we just have to do a little bit of work here it's not.
I mean the worst thing in the world essentially our forum right here inside the render method.
It just needs to have a class name of air.
If that thing has a class name of error than any error messages inside the form are going to be displayed.
But if it doesn't have a class name for air we're not going to see any errors at all.
They're all going to be hidden by default.
So all we really do here is put on a class name of air and then we can save this flip back over.
And now again I'm going to select one of my text inputs and then click out.
And now I successfully see my message OK.
That's pretty much it.
We can also click into description click out and we see the error message.
So now we can go back and each one enter in some text and the errors go away.
Likewise if I refreshed the page entirely I have a fresh form right here and if I click on submit without
touching either field each field is going to show the error message as well.
OK so that's pretty much it for validation.
So we now know how to show an error message to the user.
Now one last thing I want to do in here very quickly just for fun just to make this field look a little
bit better.
The form look a little bit better if we go back to our Rander input right here.
Notice how we have a div with the class name field.
So if we want to we can actually add a nother class name to the thing of air like so if the div with
the field custom field has also the class name air then the entire text input and the label are going
to show up as red as well.
Is that just kind of helps our user figure out what is wrong precisely inside the form.
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
whether or not we want to show that error message.
So essentially I'm going to remove that and I'll say something like I don't know Konst class name above
and then we'll do a little yes 20:15 syntax here.
So I'm going to use a template string with back ticks as opposed to single quotes.
Now I'll say field and then I'll do a little bit of string interpolation here.
So I'll say if Metta air and touched so if both these things are true or truth values then from this
ternary expression that I put right here I'm going to return this string error.
Otherwise I'm going to return a empty string like so.
So then I can reference that variable for my div class name as opposed to just the plain field.
They'll say a class name like so.
All right so I'll save this and we can flip back over.
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
error message but the field is also appearing red as well.
So it's really clear to the user exactly what's going wrong.
OK.
That looks pretty good.
All right I like this.
I think that we're doing great.
So now the last thing we really have to do is start to think about what really happens when we submit
our form.
Yeah we've got the on submit right here to handle submission.
But remember the entire idea behind this form is that we're going to actually create some stream object
or something that represents a user or streaming video to our application.
So let's take a quick pause right here and we come back the next video we're going to start to figure
out exactly what goes on when we submit our form.