How to implement client side validation in asp.net core. Server Side Validation in ASP.NET Core
In this video we will discuss how to implement client side validation in asp.net core
Text version of the video
Slides
ASP.NET Core Text Articles & Slides
ASP.NET Core Tutorial
Angular, JavaScript, jQuery, Dot Net & SQL Playlists
Client Side Validation
Use unobtrusive client-side validation libraries provided by asp.net core.
With this approach, we do not have to write a single line of code. All we have to do is include the following 3 scripts in the order specified.
jquery.js
jquery.validate.js
jquery.validate.unobtrusive.js
What does "Unobtrusive Validation" Mean
Unobtrusive Validation allows us to take the already-existing server side validation attributes and use them to implement client-side validation. We do not have to write a single line of custom JavaScript code. All we need is the above 3 script files in the order specified.
How does client side validation work in ASP.NET Core
ASP.NET Core tag helpers work in combination with the model validation attributes and generate the following HTML. Notice in the generated HTML we have data-* attributes.
[input id="Email" name="Email" type="email" data-val="true"
data-val-required="The Email field is required." /]
The data-* attributes allow us to add extra information to an HTML element. These data-* attributes carry all the information required to perform the client-side validation. It is the unobtrusive library (i.e jquery.validate.unobtrusive.js) that reads these data-val attributes and performs the client side validation.
Unobtrusive validation not working in ASP.NET Core
Make sure browser support for JavaScript is not disabled
Make sure the following client-side validation libraries are loaded in the order specified
jquery.js
jquery.validate.js
jquery.validate.unobtrusive.js
Make sure these validation libraries are loaded for the environment you are testing against. Development, Staging, Production etc.
If there's another reason why client side validation is not working, please leave it as a comment so it could help others.
We discussed implementing, server side validation in Parts 42 and 43 of ASP.NET Core tutorial. Server side validation is implemented by using validation attributes such as Required, StringLength etc. As the name implies, server side validation is done on the server. So there is a round trip between the client browser and the web server. The request has to be sent over the network to the web server for processing. This means if the network is slow or if the server is busy processing other requests, the end user may have to wait a few seconds and it also increases load on the server. This validation can be performed on the client machine itself, which means there is no round trip to the server, no waiting time, client has instant feedback and the load on the server is also reduced to a great extent.
Server Side Validation Example
On the login page, Email and Password fields are required. To make the Email and Password fields required, we decorate the respective model properties with the [Required] attribute. We discussed how to use these validation attributes and implement server side model validation in our previous videos in this series. These same validation attributes are also used to implement client side validation in asp.net core.
public class LoginViewModel
{
[Required]
public string Email { get; set; }
[Required]
public string Password { get; set; }
}
Client Side Validation
With unobtrusive client-side validation we do not have to write a single line of code. All we have to do is include the following 3 scripts in the order specified.
jquery.js
jquery.validate.js
jquery.validate.unobtrusive.js
What does "Unobtrusive Validation" Mean
Unobtrusive Validation allows us to take the already-existing server side validation attributes and use them to implement client-side validation. We do not have to write a single line of custom JavaScript code. All we need is the above 3 script files in the order specified.
Unobtrusive validation not working in ASP.NET Core
If the unobtrusive client-side validation is not working, make sure you check the following.
Make sure browser support for JavaScript is not disabled
Make sure the 3 client-side validation libraries are loaded in the order specified
Make sure these validation libraries are loaded for the environment you are testing against. Development, Staging, Production etc.
0 Comments