In this tutorial you will learn how to implement Remote validation in Asp.net Core step by step.
What is Remote validation in Asp.net 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.
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> <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> <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> <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> <div class="form-group"> <input type="submit" value="Save Student" class="btn btn-default" /> </div> </form>
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; } }
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"; } else { result = "Invalid code"; } return Json(result); }
Note:
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