>> Hey friends, welcome back to
another episode in this Blazor 101 series.
My name is Jeff Fritz,
and today I want to talk to you about validators.
Well, we saw about creating input elements so that we can create
a form to capture data and persist
it out to a service or a database.
But before I send that data off,
before it leaves the page,
it'd be really nice if we provide it some feedback to the folks
that are interacting with our form so
that they got some validation messages.
They knew if they made a mistake,
maybe they forgot to fill in a required field or
they typed in something that should be a phone number,
but they keyed in
something that was actually an email address instead.
These types of simple validation checks,
how can we do that with our forms inside of Blazor?
In this video, we're going to go over to our code.
In fact, we're going to bring back
that exact same form that we were
working with to capture our pizza order information,
and we're going to add some validators to that so that we
can validate that folks have keyed in an address,
and a city,
and a postal code,
and a phone number in order for
our pizza delivery folks to be able to
locate and deliver their pizza.
Let's go take a look. Here we are looking
at the Blazing Pizza sample again,
and we're going to take a look at exactly how
the validation works on our order entry form.
Now, you see here,
there's the OnValidSubmit method.
We talked about this in a previous video.
We also have this data
annotations validate your down here at the bottom.
This component is going to help us run through and
validate any data annotations that are on our form model object,
in this case the delivery address,
that we want to inspect and enforce those validations on.
Let's run this application and let's take a look at
what this page looks like as we're
keying in and working with
our delivery address and the validators that go with it.
Here I am. I've ordered a pepperoni pizza,
and I now have my name and fields that I can key into.
Some of these fields are required.
Some of these fields have a maximum length.
If I click "Place Order",
I immediately get this validation that is occurred and it's
enforcing that all of these fields are required.
Let me go key in some values here
and I will specify exactly where I want my pizza delivered,
123 Main Street, and we'll
send this to
SomewhereWithaReallyLongNameThatMightBeConfusingToSomeFolksButIKnowExactlyWhereItIs.
There we go. Regions. No. Here's one
of those features of my validation and my input text element.
It's already revalidated.
These other two revalidated and turn from
a red background or red border to a green border.
This one, because it's too long,
it's longer than 50 characters,
it's still staying red and the error message has been updated.
Now let's actually send it to Springfield.
My region, well,
let's make it Springfield, Ohio.
My postal code, I don't know.
We'll just key in on postal code.
All of my validators flip
immediately and indicate that things are successful.
They went to green borders from red borders.
Now, the presence and the color of that border is one thing.
There's an accessibility issue there.
However, we include the validation summary
for each one of those fields so that it will
show that error message in addition
to putting the border color on those fields that need updating.
Let me hit over and show you a little bit more about how we
can customize the validation message for
each one of those fields and how we can add
an entire validation summary to this component.
Let me head back over to the code real quick.
Here in the address editor component,
where I have all those input text elements defined,
I have this validation message element to find on lines 5,
13, 21, and further below.
You could see validation message for,
and it's specifying here's the field that I
want you to inspect and placing message
next to this input text if there's
an appropriate error message that we need to display.
Terrific. That's one item that we can do right there.
We can also include a validation summary element over on
our checkout page that will
include and provide a summary of all of those error messages.
Let me add one right here.
There it is, validation summary,
and it will just include all of those messages in this one place.
I'll restart the application and
we'll take a look at what this looks like.
Now, it might be a little hard to see because
it's not placed in the best location.
But I not only have the error messages reported over here on
the right right next to those fields because of
that validation message component,
but I've also got the summary down here,
and these are the default required messages.
They might be a little bit hard to read here.
If I highlight them,
makes it a little bit easier to see with
the red bullet next to them.
You're going to want to place these somewhere and format them
prominently so that it's easy for folks to find.
Since I placed them at the bottom of
the screen below the "Place Order" button,
they appear down here.
You have a bunch of options for
how you want to provide validation.
You're interacting with the component attributes that
are providing the data annotation for each one of these fields.
That is going to make it easier for you
to set up and configure validation.
That works not just with this page,
not just with your user interface,
but it also works with Entity Framework and
your model binding going into ASP.NET Core APIs.
You'll get the exact same enforcement of those requirements,
whether you're working on
the server side or you're working here in user interface.
Thanks so much for watching. I hope you
enjoy learning a little bit more about validation.
I've got some links just
below the video here so that you can go and learn more
about how you can do some more advanced tasks
with adding additional validation,
doing more complex checks,
and interactions with your fields. Happy coding.
[MUSIC]