Sitecore Forms – Custom Field Validator

Just like any other feature in Sitecore, Sitecore Form’s Field Validator can also be customized based on our need.

Any forms would require a client side validation and server side validation. In Client Side we can validate the field for any special characters and block user from entering them. However, in the server side we may need to validate them for few other conditions apart from the special characters.

Meaning, say we have a registration form and it has an UserId field. In any application the UserId field which is picked by the user must be unique. So in those forms, we do this validation of whether that UserID already exists in the DB or not  in the server side.

Sitecore doesn’t provide any OOTB components for such scenarios and of course there is no reason for Sitecore to provide one as well, as these are project specific requirements.

However we do have the option of creating a Custom Field Validator on our own to cater our requirements.

This post is about to how to create a custom Form Field Validator and associate the created Validator with a field, so that the Content Authors can opt for the required validators while creating the forms in the Form Editor window.

• Create a new Validator element under /sitecore/system/Settings/Forms/Validations based on the template /sitecore/templates/System/Forms/Validation

• The created element has 3 Settings fields
  1. Type – Namespace, Assembly
  2. Message – Client Side Validation Error Message. {0} will be replaced with the Field Name.
  3. Parameters – This is a key value pair, that can be configured from Sitecore end and it will be used during run time to perform client and server validations. These parameters will be fetched in the code and processed according to our need. In the below example, regularExpression used for validating the input both in client and server side.

• Now to the code part,
  1. Create a Validator class that inherits from ValidationElement<RegularExpressionParameters> under Sitecore.ExperienceForms.Mvc DLL. Note that the RegularExpressionParameter mentioned here is not mandatory. ValidationElement<TParameter> is  the actual base type. Meaning instead of Reg.Exp Parameter you can use String as well.

• Inside this class, we have to override 3 methods,
• Initialize – Initializes the class attributes with the values from the corresponding sitecore item.

• ClientValidationRules – We will the client side validation elements for the validator. In this example just a regex.

• Validate – Actual Server Side validation takes place here. Inside this methods we can add our logic to validate with any 3rd party components. In case of the UserID part, we can have our API call to validate here and send a response accordingly.

• The Initialize method will be invoked both during form load and form post once per field. ClientValidationRules execute during Form Load and Validate during Form post. (This is needless to say given the method name the functionality they perform yet thought I record this note here)

• Once the class file is added, add the Namespace and assembly in the type field of the validator element.

• Now, to associate this validator with the field type, go to the relevant field under /sitecore/system/Settings/Forms/Field Types. For Ex. Single-Line text under Basic, under Settings section, Allowed Validations multi list field, add the Field Validator which is created.

• This will allow content authors to opt for the required validations for the field while adding the field to the form in the form editor window.

Reference,

Walkthrough: Creating custom validation (sitecore.com)