Remote Validation

• Mar 16, 2021
• 5 minutes to read

Starting with version 3, the ASP.NET MVC framework allows you to validate a form field on the server side without submitting the entire form to the server. This can be useful if it is necessary to validate a field that cannot be validated on the client side; for example, if you need to check whether or not a record with the same field value already exists in the database. Remote validation allows you to prevent the end-user from sending the web form to the server multiple times before the proper value is entered.

This topic describes how to add a remote validation functionality to the DevExpress ASP.NET MVC Data Editors.

To implement remote validation within DevExpress MVC Data Editors, you need to perform the following steps.

• Remote validation requirements
• Adding a validation action to the controller code
• Adding validation options to the model class

Remote validation requirements

JavaScript References

The remote validation mechanism requires the jquery-3...min.js, jquery.validate.min.js and jquery.validate.unobtrusive.min.js JavaScript references to be included in your layout page (or to certain views that contain validated forms). These libraries are available in the newly created ASP.NET MVC (vol. 3 or higher) project or via the Nuget Package Manager.

The code sample below demonstrates how to include the required JavaScript references (using the Razor View Engine in MVC 3).

ASPX

<script src="@Url.Content("~/Scripts/jquery-3.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Razor v2+ (which is used in MVC 4+) allows you to add the same script references in the following way.

ASPX

<script src="~/Scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

Note

The JavaScript references should be added in the order they are specified in the code samples above.

 

Enable Unobtrusive JavaScript

Remote validation requires enabling unobtrusive JavaScript.

To enable unobtrusive JavaScript for all pages in your project, add the following keys to the Web.config file.

XML

...
<configuration>
    <appSettings>
        <add key="ClientValidationEnabled" value="true"/>
        <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
    </appSettings>
</configuration>
...

To enable unobtrusive JavaScript for a specific view only, add the following code to the required view.

Partial View:

C#

@{
    Html.EnableClientValidation();
    Html.EnableUnobtrusiveJavaScript();
}

 

Date Editor Requirements

The validated DevExpress ASP.NET MVC Data Editor should be bound to the data model field. To bind an editor to a model field, use the editor’s Bind method and set the editor’s Name property to the name of the corresponding data model field. You can also use strongly-typed Data Editors, which can be bound to model fields using a lambda expression.

The ASP.NET MVC Framework requires data editors to be inside of a <form> element that can be rendered with Html.BeginForm() in order to be validated.

Adding a validation action to the controller code

In the controller code, add an action method that will receive an object of the same type as the validated field. This action method should return true as JSON-formatted content for valid values. Any other response is considered false. If the method returns false, the validation error message appears. You can define the error message text in the Remote attribute ErrorMessage property as shown in the model code above. Refer to the Displaying Validation Error Messages article to learn more about displaying validation error messages.

The code sample below demonstrates how to create an action method that validates whether or not a user with the specified email address already exists.

Controller code:

C#

using System.Web.Mvc;

namespace MyProject.Controllers {
    public class HomeController : Controller {
        MyProject.Models.userEntities db = new  MyProject.Models.userEntities();

        public ActionResult Index() {
            return View();
        }

        // ...
        // Performs a remote validity check.
        public JsonResult CheckIfExists(string email) {
            var model = db.Users;
            // Returns "false" (i.e., "not valid") if a user with the specified email address already exists.
            return Json(!model.Any(it => it.Email == email), JsonRequestBehavior.AllowGet);
        }
    }
}

Adding validation options to the model class

The remote validation is performed on the server side, by an action method in a controller, specified within the RemoteAttribute parameters. To define an action method and a controller that should perform remote validation, decorate a required model field with the RemoteAttribute attribute with the necessary parameters.

The code sample below illustrates how to validate the “Email” field in the “CheckIfExists” action of the “Home” controller.

Model code:

C#

namespace MyProject.Models
{
    using System.ComponentModel.DataAnnotations;
    using System.Web.Mvc;

    public class User
    {
        public int ID { get; set; }
        [Required]
        public string CustomerName { get; set; }
        public string BirthDate { get; set; }
        [Required]
        [EmailAddress]
        // The "Remote" attribute parameters specify that the validation of the "Email" field should be performed in the "CheckIfExists" action method of the "Home" controller.
        [Remote("CheckIfExists", "Home", ErrorMessage = "The Email address you entered already exists. Please specify a different Email address.")]
        public string Email { get; set; }
    }
}