Validations in ASP.NET Core
Adding both server-side and client-side validations in your ASP.NET Core application
Validations in ASP.NET Core are part of ComponentModel.DataAnnotations namespace. They can be added to our model properties and further used to validate the input taken from users while submitting data to the server during a POST operation.
By default, there are a lot of in-built validations including EmailAddress, Phone, Range, RegularExpression, Required, etc. I have done for [Required] in my Restaurants class which makes sure the property has some data tied to it. Similarly, we can add others as well like [StringLength(100)] or [EmailAddress]
We can also set what to show if validation triggers by using ErrorMessage like: [Required(ErrorMessage = “Please enter name”)]
Now we can add a span with an asp-validator-for on our properties (that sets the value and name attributes for us) to our razor view where we want validations to get triggered and show some message to the end-user in case data POSTed by the user is Invalid.
As an example, I have shared 2 validation messages which I used for the Name and Location property of my Restaurant class.
1. <span asp-validation-for="Restaurant.Name" class="text-danger"></span>2. <span asp-validation-for="Restaurant.Location" class="text-danger"></span>
We can add the below code to check on the server-side if the data submitted by the user is valid (as per our validations). This can be done with the help of the below code:
if(ModelState.IsValid) {//enter logic when data POSTed by user is valid
}return View();
ModelState is a property of a Controller instance, and can be accessed from any class that inherits from Microsoft.AspNetCore.MVC.Controller. The ModelState has two purposes: to store and submit POSTed name-value pairs, and to store the validation errors associated with each value.
But there is a catch while using this approach. Every time we have to make a call to the server to check if the data POSTed by the user is valid or not. It will be better to also put in place a client-side validation check as well so that server-side calls can be minimized.
For client-side validations, we first need jquery-validation and jquery-validation-unobtrusive library along with our general jquery and bootstrap library. In .NET Core, these should be added in wwwroot in the lib folder.
Then we need to add the reference to jquery.validate.min.js and jquery.validate.unobtrusive.min.js in our _ViewImports.cshtml so that they can be used throughout our application.
Below code shows how to reference them in a partial view in the Shared folder:
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script><script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
I have named the partial view as _ValidationScriptsPartial.cshtml which can be referenced anywhere throughout the application by just using the below code:
@section Scripts{<partial name="_ValidationScriptsPartial"/>}
I referenced in my view where I need to create a new restaurant by filling and posting the details of it.
As you can see in both the images of my web application, the client-side validations got triggered even before I clicked the Save button and made the server call.
Also, after I started typing something in the Name input the validation message faded away as the model property became valid.
If you liked reading this article, give it a clap. You can reach me in the comments section if you have any questions or suggestions.
