Remote validation on particular model property in ASP.NET MVC

How to perform remote validation on a particular model property?

Before we start seeing how to implement remote validation, let’s understand what Remote validation is. Remote validation is a special type of validation that is used on a Model property that can’t be validated on the client side and is therefore likely to fail validation when the form is submitted.

This is particularly used in the registration scenario when we ask for username from the user. As user types, we send partial request on the server with current data and check if that username exists and shows “already exists” message to the user in real time.

To do this, we need to decorate the Model field with [Remote] attribute like this (In this case, we have demonstrated this on FirstName property of the Model).

MODEL CODE

        [StringLength(20, MinimumLength = 4, ErrorMessage = "Must be at least 4
characters long.")]
        [Remote("CheckForDuplication", "Validation")]
        public string FirstName { get; set; }

In this case Remote attribute accepts two parameters “action name” and “controller in which this action method exists”. In our case action method is “CheckForDuplication” and controller is “Validation”.

CONTROLLER ACTION CODE

        public JsonResult CheckForDuplication(string FirstName)
        {
            var data = db.PersonalDetails.Where(p => p.FirstName.Equals(FirstName,
StringComparison.CurrentCultureIgnoreCase)).FirstOrDefault();

            if (data != null)
            {
                return Json("Sorry, this name already exists",
JsonRequestBehavior.AllowGet);
            }
            else
            {
                return Json(true, JsonRequestBehavior.AllowGet);
            }
        }

Above method is the controller action method that accepts the FirstName as parameter and returns JsonResult. In this method, we are getting the record based on FirstName coming in from the textbox from the form and if that exists in our database we are returning “Sorry, this name already exists” otherwise we are returning true.

We do not need to do any extra changes in the View to support Remote validation, it should be the default view as it gets created while Scaffolding.

VIEW CODE (FOR CLARITY PURPOSE, ONLY FOR FIRSTNAME FIELD CODE ID SHOWN HERE)

<div class="editor-label">
      @Html.LabelFor(model => model.FirstName)
  </div>
  <div class="editor-field">
      @Html.EditorFor(model => model.FirstName)
      @Html.ValidationMessageFor(model => model.FirstName)
</div>

When user starts entering characters, if it is less than 4 characters long the inbuilt StringLength validation executes and throws error to write at least 4 characters. When user writes at least 4 characters, the partial request goes to the server as user types to the CheckForDuplication action method of the ValidationController and based on what the method returns, it shows message.