Walkthrough: Creating custom validation

Current version: 10.1

A web form validation ensures a website visitor enters the correct value in a field on a web form. You can implement custom validation or create a new validator based on the existing validation. This walkthrough describes how to implement custom validation that verifies names. It validates the input string of the Single-line text field for valid names.

Note

This topic provides an example of how to create a custom validation, but to create a Name validator based on the regular expression, you do not have to create a custom validation. You can create a name validator by reusing the existing RegularExpressionValidation.

This walkthough describes how to:

Create the validation class
Create the validation item
Modify the field type
Add the validation to the field editor

Create the validation class

When you create a custom validation, you must create a class that inherits from the ValidationElement<string>.

To create the validation class:

Create the NameValidationclass and inherit from ValidationElement<string>.
Reference the Sitecore.ExperienceForms.Mvc package and System.ComponentModel.DataAnnotation assembly.
Implement the Validatemethod for server validation.
Implement the ClientValidationRules property for client validation.
Override the Initialize method to initialize properties from the validated model (for example, the title of the field).

RequestResponsec#

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Text.RegularExpressions;
using System.Web.Mvc;
using Sitecore.ExperienceForms.Mvc.Models.Fields;
using Sitecore.ExperienceForms.Mvc.Models.Validation;

namespace Sitecore.ExperienceForms.Samples.Validation
{
    public class NameValidation : ValidationElement<string>
    {
        private const string NamePattern = "^[a-zA-Z ]*$";

        public NameValidation(ValidationDataModel validationItem) : base(validationItem)
        {
        }

        public override IEnumerable<ModelClientValidationRule> ClientValidationRules
        {
            get
            {
                var clientValidationRule = new ModelClientValidationRule
                {
                    ErrorMessage = FormatMessage(Title),
                    ValidationType = "regex"
                };

                clientValidationRule.ValidationParameters.Add("pattern", NamePattern);

                yield return clientValidationRule;
            }
        }

        public string Title { get; set; }

        public override ValidationResult Validate(object value)
        {
            if (value == null)
            {
                return ValidationResult.Success;
            }

            var regex = new Regex(NamePattern, RegexOptions.IgnoreCase | RegexOptions.ExplicitCapture | RegexOptions.Compiled);

            var stringValue = (string)value;
            if (string.IsNullOrEmpty(stringValue) || regex.IsMatch(stringValue))
            {
                return ValidationResult.Success;
            }

            return new ValidationResult(FormatMessage(Title));
        }

        public override void Initialize(object validationModel)
        {
            base.Initialize(validationModel);

            var obj = validationModel as StringInputViewModel;
            if (obj != null)
            {
                Title = obj.Title;
            }
        }
    }
}

Create the validation item

To create the validation item:

Go to /sitecore/System/Settings/Forms/Validations.
Right-click Validations, click Insert, and click Insert from Template.
Select the /System/Forms/Validation template.
In the Item Name field, enter Name Validation and click Insert.
Navigate to the item you just created and in the Settings section, in the Type field, set the value to the class type name.
In the Message field, enter an error message, for example, contains an invalid name.

Modify the field type

Now you must modify the field type for which you want to use the new validation. In this example, we only want to use the new validation for the single-line field type.

To modify the field type

Go to /sitecore/system/Settings/Forms/Field Types/Basic/Single-line text.
In the Settings section, in the Allowed Validations field, select the new validation item, for example, Name validation.

Note

Validators that are based on same validation type should not be enabled together on a field by the Form designer. For example, Email validator and Phone number validator are both based on regular expression validation and should not be enabled at the same time on a specific field. To prevent enabling same type validation on the field by the Form designer, we recommend that you not add validators of same type to the allowed validations list.

Add the validation to the field editor

Most elements have the FieldValidation control added to the field editor. If the validation is not shown by default, you can add the validation to the field editor:

Note

For the example in this walkthrough, you must have the Sitecore Rocks Visual Studio plugin. The plugin is compatible with Visual Studio 2019 or earlier.

Switch to the Core database and in the Content Editor, navigate to /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings and click the element to which you want to add the validation.
In the ControlDefinitions field, add the FieldValidation control definition. You can find the control definition at: /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Common/Validation/FieldValidation