Join Class

Remote validation in Core Razor Pages

In this tutorial you will learn how to implement Remote validation in Core step by step.

What is Remote validation in Core?
Remote validation is a technique of validating data with database or any other external web services while user entering data in text box, making an ajax call to server side code to check if the input is valid or else display the error message immediately

Story behind implementation
We have created a simple form for accepting student registration for sports event, so apart from student name and mobile number we are also accepting a unique code as their choice, but we need to validate the code with backend server to ensure that the same code has not been taken by some other student. , and we have to check that at the time of registration only. core Remote validation example

Step 1:
Create a form with following fields like FirstName, LastName, Email and StudentCode, StudentCode is the field where we experiment Remote validation.

<form asp-controller="student" asp-action="index" method="post"> <div asp-validation-summary="ModelOnly" class="text-danger"> </div>
<div class="form-group">
<label asp-for="FirstName" class="control-label"> </label>
<input asp-for="FirstName" class="form-control" />
<span asp-validation-for="FirstName" class="text-danger"> </span>
<div class="form-group">
<label asp-for="LastName" class="control-label"> </label>
<input asp-for="LastName" class="form-control" />
<span asp-validation-for="LastName" class="text-danger"> </span>
<div class="form-group">
<label asp-for="Email" class="control-label"> </label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"> </span>
<div class="form-group">
<label asp-for="StudentCode" class="control-label"> </label>
<input asp-for="StudentCode" class="form-control" />
<span asp-validation-for="StudentCode" class="text-danger"></span>
	<div class="form-group">
		<input type="submit" value="Save Student" class="btn btn-default" />

Step 2:
Make sure you have added following jquery file reference, so that ajax request works properly

@section scripts
    <script src="~/lib/jquery.js"></script>
    <script src="~/lib/jquery.validate.js"> </script>
    <script src="~/lib/jquery.validate.unobtrusive.js"> </script>

Step 3:
Now we create the model with all above fields, and notice how we are setting Remote attribute on StudentCode property

public class StudentModel
public int StudentId { get; set; }
[Required(ErrorMessage = "Firstname Required")]
[StringLength(50, ErrorMessage = "5 to 50 characters.", MinimumLength = 3)]
public string FirstName { get; set; }
[Required(ErrorMessage = "Lastname Required")]
[StringLength(50, ErrorMessage = "5 to 50 characters.", MinimumLength = 3)]
public string LastName { get; set; }
[Required(ErrorMessage = "Email Required")]
[EmailAddress(ErrorMessage = "Invalid email")]
public string Email { get; set; }
[Required(ErrorMessage = "Code Required")]
[Remote("ValidateCode","student", ErrorMessage = "Please enter a valid code")]
public string StudentCode { get; set; }

This is how you call the method with Remote attribute
[Remote("MethodName","ControllerName", ErrorMessage = "Error Message")]

Step 4:
Now we write the method in server side code to interact with database or any external web service, this is the place where we check if the code is already exist in database

public IActionResult ValidateCode(string code)
            string result;
            // here you can check the code with database 
            if (code == "wtr1")
                result = "Valid code";
                result = "Invalid code";
            return Json(result);

Here we have not connected with database or web service, we simply checked with a hardcoded value “wtr1”, you can replace that code with your database call or web service call Core Course core mvc remote validation Core Tutorial for Beginners
ASP.NET MVC Interview Questions Answers
Hire .Net Developer
Asp.Net Core C# Examples | Join Asp.Net MVC Course