ASP NET Core client side validation

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

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

Text version of the video
https://csharp-video-tutorials.blogspot.com/2019/06/aspnet-core-client-side-validation.html

Slides
https://csharp-video-tutorials.blogspot.com/2019/06/aspnet-core-client-side-validation_19.html

ASP.NET Core Text Articles & Slides
https://csharp-video-tutorials.blogspot.com/2019/01/aspnet-core-tutorial-for-beginners.html

ASP.NET Core Tutorial
https://www.youtube.com/playlist?list=PL6n9fhu94yhVkdrusLaQsfERmL_Jh4XmU

Angular, JavaScript, jQuery, Dot Net & SQL Playlists
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

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 not working in ASP.NET Core