How to implement Client-Side Validation in Asp.net Core?

Client-Side Validation – By Sagar Jaybhay

A client-side validation means validation perform on client machine or in browser of client.

First, server-side validation is performed or validate using Validation attributes like Required, String Length, etc. But when we perform server-side validation there is a round trip to a server over the network.

In such situation if our server is busy with another heavy processing task or either busy to serve another request so it will send result to user but it required some time and if your application needs to be fast then to overcome this situation you will go with this type of validation.

By using client-side validation there are some advantages

  1. No round trip to the server
  2. Processing is fast
  3. User get instant result
  4. Our application use client’s machine processing

Server Side Validation In Asp.Net Core
Server Side Validation In Asp.Net Core

This image shows server-side validation and in this, we use LoginViewModel class validation attributes that perform validations.

For client side validation we required below 3 JQuery files

  1. jquery
  2. jquery-validate
  3. jquery-validation-unobtrusive

unobtrusive – why this name is given?

Because it allows us to takes server-side validation to use and use them to perform validation client-side. Also using this we don’t need to write a code for that.

Library For Client Side Validation In Asp.net core
Library For Client Side Validation In Asp.net core

After adding this file we need to add this in our _layout view and also order matters so the order of this as below

  1. jquery
  2. jquery-validate
  3. jquery-validation-unobtrusive

Library for client side validation 2
Library for client side validation 2

By using these 3 files in this order you able to make this type of validation and also it prompts error as per your input at runtime. So no need for a server round trip.

When Client Side validation fails:

  1. The browser needs to support JavaScript
  2. The lib which we include it should be in the same order as we gave
  3. Another point is that you need to include this file in the environment which you use example development, production or staging.

How to Check EmailID is already using or not in Asp.net core MVC?

Previous information we have added jquery client-side validation scripts to our project. Then in this at the time of user-typing email id on registration page, we need to know whether the email id is already used or not. For that, we have created one method in our Account controller.

[AllowAnonymous]
        [AcceptVerbs("Get","Post")]
        public async Task<IActionResult> IsUsedEmailID(string Email)
        {
            //if (!string.IsNullOrEmpty(EmailID))
            {
             var user= await _user.FindByEmailAsync(Email);

             if (user == null)
             {
                 return Json(true);
             }
             else
             {
                 return Json($"Email {Email} this Email ID already in Used.");
             }
            }
            
        }

In this method, we decorate with the AcceptVerbs attribute. Instead of this, we can use HttpGet and HttpPost attribute. But in an attribute, you can enable this for the get and post-call.

We injected UserManager in our controller constructor and in this we use in-built method FindByEmailId this method returns the user if we pass valid email id. If email Id present in our database it will return the user else it will null. So we return JSON formatted data.

Imp Point to remember that we need to decorate our field with the Remote attribute. We have created RegistrationVIewModel in this we have Email field and decorated with Remote like below.

public class RegistrationVIewModel
    {

        [Required]
        [EmailAddress]
        [Remote(controller:"Account",action: "IsUsedEmailID")]
        public string Email { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }


        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "Confirm Password")]
        [Compare("Password",ErrorMessage = "Password and Confirm Password not match.")]
        public string ConfirmPassword { get; set; }
    }

For Remote attribute we pass Controller name and action method name to this.

Remote Validation In Asp.Net core
Remote Validation In Asp.Net core

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

Related posts