Hey guys, I am Venkat and this is part 22 of web development with Blazor video series. In
this video we'll discuss data validation in asp.net core Blazor. There are two
ways to validate data in a Blazor data grid, by using validation rules property of grid column
component and by using validation attributes in System.ComponentModel.DataAnnotations namespace.
At the moment in this data grid we don't have any validations, which means we can wipe out first
and last name and then click update, notice both the columns are blank and this is true
even in the underlying Employees database table. Now, let's enforce couple of validation rules on
this first name grid column, and let's do that using validation rules property, notice on the
grid column we have validation rules, and when I hover the mouse over, we can see it is expecting
an object of type ValidationRules, so let's create a new object of type ValidationRules,
and from the intellisense we can see all the different types of validations that are
supported - email, max, maxLength, min, minLength etc. Now, let's use required validation, and again
from the intellisense we can see this property expects a value of type boolean, whether we want
required validation or not, we want required validation, so let's set it to true and let's
also enforce minLength validation, again from the intellisense you can see this is expecting a value
of type integer, basically the minimum number of characters that we want in the first name column
Now, when we put this row in edit mode and then provide only one character for first name,
notice we have min length validation in effect, please enter at least two characters and if I
don't enter any characters at all, and then tab out, we have required validation, so we need to
provide a value for first name, let's also provide a value for last name and then click update.
Validation rules are triggered when an input element loses focus like our first name field
or when the form itself is submitted. At the moment on this last name field we don't have
required validation, this means I can empty the field and then submit this form by clicking
the update button, now let's enforce both these validation rules, required and minlength
even on the last name field, in the interest of time let's actually copy
this ValidationRules property and place it on the last name field.
In the first name field we already have a value, this means when we change this value,
let me actually wipe it out and then when the element loses focus the required validation is
triggered immediately upon the first name field losing focus, in the case of last name field
we didn't have any value here already and I'm not changing this field in any way, I'm simply
making this element lose focus by pressing the tab key, and notice we don't have the required
validation error triggered, okay, so the key point to keep in mind is validation rules
are triggered when an element loses focus, that is when we change the value in a field
and then when the element loses focus, that's when the validation rules are triggered,
if we don't change the values of the elements then the validation rules are not triggered,
for the validation rules to be triggered we have to submit this form, so notice what's going to
happen when I submit this form by clicking this update button, that's when the required
validation on the last name field is triggered, so the key point to keep in mind is validation
rules are triggered when an input element loses focus or when the form is submitted.
At the moment to enforce validation rules on this data grid we are using validation rules property,
now the downside of this approach is if we have another instance of this data grid either
in this page or in another razor page, we have to repeat all these validation rules, let me
actually show this in action, let's make a copy of this data grid and paste it on the same page,
and then let's remove these validation rules from this first name field and last name field
On this first data grid we don't have any validation rules, we only have them
on the second data grid, this means I can use this grid to effectively empty first
and last name and then still submit the form, there we go, so the key point to keep in mind
is validation rules property enforces validation only on that specific instance of the data grid,
if you have another data grid you need to repeat all the validation rules even on that data grid,
a better and centralized way to enforce these validation rules is by decorating
model class properties in our case Employee class properties with validation attributes
in System.ComponentModel.DataAnnotations namespace, this is called model validation,
now we're going to use model validation, so on the second data grid, let's remove validation
rules property both from the first name field and the last name field, data source for this
data grid is this Employees property, and from the intellisense you can see this property data type
is List, so the model class for the data grid is Employee class which is present
in the shared project, so let's open this file, we want to enforce required validation
on this FirstName property, so we simply decorate it with [Required] attribute, this attribute is
present in System.ComponentModel.DataAnnotations namespace, so let's bring that in, let's also
enforce [MinLength] validation, for that we use [MinLength] attribute and with [MinLength]
attribute we need to specify the minimum number of characters we want in our case we want 2.
Now, if we try to submit this form without providing a value for first name,
we get validation error as expected, and even on the second instance of the data grid,
notice validation works exactly the same way. At the moment on this email address
field we don't have any validation, even if I simply type the name of the employee as email
address and then try to submit the page, notice we don't have a validation error, let's enforce
email address validation, same idea, decorate Email property with [EmailAddress] attribute.
Notice, now if we provide an invalid email address, we get the validation error.
Dotnet provides several built-in validation attributes, for example, [Required] attribute,
which specifies the field is required, [Range] specifies the minimum and maximum value allowed,
[MinLength] specifies the minimum length of a string, [MaxLength] - maximum length of a string,
[Compare] - compares two properties of a model, for example compare email and
confirm email properties, similarly password and confirm password, [RegularExpression]
validates if the provided value matches the pattern specified by the regular expression,
in addition to validation attributes dotnet also provides these general purpose attributes,
[DisplayFormat] sets the display format for a datagrid column, [Display] sets the display name
for a data grid column, [Editable] indicates whether a field in the data grid is editable,
[Key] specifies the primary key column in a data grid,
at the moment in the Date of Birth column we are displaying both date and time part,
let's say we only want to display the date part, and there are two ways to achieve that, if we
want to do it at the data grid level we can use the Format property for that, and set the format
to a small letter d, basically short date which only displays the date part, and the other way
is to set the [DisplayFormat] attribute on date of birth property in the employee class.
We specify data format string, and again we set it to a small letter d, we can also apply this
format string in edit mode, that is when the row is in edit mode, and for that we use this
property ApplyFormatInEditMode true or false, now the column header text is Date of Birth,
and at the moment this header text is coming from HeaderText property on the respective grid column,
now we can also control it using [DisplayName] attribute, let's actually do that, let's remove
the HeaderText property from the grid column and instead on this respective property in the
Employee model class, let's use [DisplayName] attribute and set the display name you want,
we can also control if this property is editable by using [Editable] attribute,
another way to do this if you want to do it at the data grid level is by using
AllowEditing property on the respective grid column, let's actually do it using
[Editable] attribute, we don't want it to be editable so let's set the value to false.
Now, in the date of birth column, we only have the date part no time part, and when we put the
row in edit mode, this column is not editable, but then if we take a look at the header text,
it is the column name DateofBirth, it's not taking the display name that we have specified right
here, that's because we should actually be using [Display] attribute and then set the Name property
Notice, now the header text is DOB as expected in the second grid,
but in the first grid we still have Date of Birth, why is that? Well, that's because on
the first grid we have explicitly specified the header text using HeaderText property,
at the moment notice the default min length validation error message that we have,
the field first name must be a string or array type with a minimum length of two, personally,
I don't like this message, it's very long and a bit cryptic to the end user,
I want something simple, maybe first name must contain at least two characters,
on all these built-in validation attributes - Required, MinLength, EmailAddress etc
we have ErrorMessage property which we can use to override the built-in validation error message.
Notice, now we see our simple overridden validation error message. At the moment,
we already have validation on this Email field, if we supply an invalid email address we get
the validation error as expected, now, here is our new business requirement, let's say
we only want to allow pragimtech.com as the email domain, if the user supplies any other
email domain, for example gmail.com, we want to display a validation error - Email domain
must be pragimtech.com. We'll discuss how to implement this using custom validation attribute
in our next video. That's it in this video, thank you for listening.