Built-in Validation

• Dec 18, 2020
• 3 minutes to read

DevExpress MVC data editors provide a built-in server and client side validation API. You can customize an editor’s validation settings on the client or server or both.

Note

Built-in validation is not performed when specifying validation attributes for a model class properties (Unobtrusive Client Validation).

Server Side Validation

Use the following properties to define editor validation logic:

• The ValidationSettings.RequiredField property specifies whether the editor is a required field.
• The ValidationSettings.RegularExpression property allows you to validate an editor’s value based on a regular expression.

When an editor fails validation logic, a specific error message containing the error’s description can be displayed. The ValidationSettings.Display property specifies the error message’s render style.

The error frame’s appearance can be customized via the ValidationSettings.ErrorDisplayMode property. The ValidationSettings.ErrorFrameStyle settings specify whether the error’s description is displayed as an image or text (or both) in an error frame. To define an error image, use the ValidationSettings.ErrorImage property. The error text can be specified using the ValidationSettings.ErrorText property or Validation event’s handler.

The code sample below demonstrates how to perform a validity check on the server side.

Razor (View)

@Html.DevExpress().TextBox(settings => {
    settings.Name = "Name";
    settings.ControlStyle.CssClass = "editor";
    settings.Properties.ValidationSettings.Assign(MyProject.Controllers.ValidationsHelper.NameValidationSettings);
    settings.Properties.ClientSideEvents.Validation = "OnNameValidation"; //defines the validation event handler on the client side
}).Bind(Model.Name).GetHtml()

C# (ValidationController)

using System;
using System.Web.Mvc;
using DevExpress.Web.Mvc;

namespace MyProject.Controllers {

    public class ValidationsHelper {
        static ValidationSettings nameValidationSettings;
        public static ValidationSettings NameValidationSettings {
            get {
                if (nameValidationSettings == null) {
                    nameValidationSettings = ValidationSettings.CreateValidationSettings();
                    nameValidationSettings.Display = Display.Dynamic;
                    nameValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithText;
                    nameValidationSettings.ErrorText = "Name is required";
                }
                return nameValidationSettings;
            }
        }
        public static void OnNameValidation(object sender, ValidationEventArgs e) {
            if (e.Value == null) {
                e.IsValid = false;
                return;
            }
            var name = e.Value.ToString();
            if (name == string.Empty)
                e.IsValid = false;
            if (name.Length > 50) {
                e.IsValid = false;
                e.ErrorText = "Must be under 50 characters";
            }
        }
    }

    public class EditorsController : Controller {
        [HttpGet]
        public ActionResult BuiltInValidation() {
            return View("BuiltInValidation", new BuiltInValidationData());
        }
        [HttpPost]
        public ActionResult BuiltInValidation(FormCollection form) {
            BuiltInValidationData validationData; //"BuiltInValidationData" is a Model class
            bool isValid = true;
            validationData = new BuiltInValidationData {
                Name = EditorExtension.GetValue<string>("Name", ValidationsHelper.NameValidationSettings, ValidationsHelper.OnNameValidation, ref isValid),
            };
            if(isValid)
                return View("BuiltInValidation", "BuiltInValidationSuccess", validationData);
            else
                return View("BuiltInValidation", validationData);
        }
    }
}

Client Side Validation

An editor’s Validation client event can be handled to specify the editor’s custom validation logic.

Editor validation is automatically triggered by changing the editor’s value whenever the ValidationSettings.ValidateOnLeave option is enabled. You can manually initiate editor validation using the editor’s client Validate method or specific static client methods (such as the ASPxClientEdit.ValidateEditorsInContainer, ASPxClientEdit.ValidateEditorsInContainerById, ASPxClientEdit.ValidateGroup).

The code sample below demonstrates how to perform a validity check on the client side.

Razor

<script type="text/javascript">
//<![CDATA[
    function OnNameValidation(s, e) {
        if (e.value == null)
            e.isValid = false;
        var name = String(e.value);
        if (name == "")
            e.isValid = false;
        if (name.length > 50) {
            e.isValid = false;
            e.errorText = "Must be under 50 characters";
        }
    }
// ]]> 
</script>

@Html.DevExpress().TextBox(settings => {
    settings.Name = "Name";
    settings.ControlStyle.CssClass = "editor";
    settings.Properties.ValidationSettings.Assign(MyProject.Controllers.ValidationsHelper.NameValidationSettings);
    settings.Properties.ClientSideEvents.Validation = "OnNameValidation"; //defines the validation event handler on the client side
}).Bind(Model.Name).GetHtml()