Episerver Forms validator with settings

When you have worked with Episerver Forms you know you can enable validators on a form element. You have the Required validator, the Regular Expression validator, the Email validator and more. Most of these validators have a simple on/off configuration, but when you look at the Regular Expression validator there is a ‘change’ option to set the actual RegEx.

RegularExpressionValidator1RegularExpressionValidator2

How can we create such a validator with settings? The secret is in an interface called IPreviewableTextBox.

We will build a custom validator that checks a string for a minimum length.
To start building our validator we begin with a simple model that will contain the value of our setting.

Now that we have the model in place, let’s build the actual validator.

Here we will use the IPreviewableTextBox interface. It’s just an empty interface, but the Forms UI will pick it up to render the ‘change’ link and textbox. Since it is a textbox, the value we enter is always a string.

To work with our validator setting we need to override some methods.

First the Initialize method.
This method will receive the value we specified in the validator setting. In our validator, we need to convert it to an integer. If someone entered an incorrect value like ‘abc’ we will convert that to 0.

Next up is the BuildValidationModel method.
We don’t really need to override it, but since I wanted to create a clear validation message that specifies the minimum number of character, I did.

Finally, there is the Validation method.
This is the actual (server side) validation. If the string is at least the specified length it will succeed, else it will fail.
If not value is entered in the form the validator will succeed. We are not checking for a required field here.

Don’t forget to enter the name of the validator and the validation message in the resource file.

Besides the server validation we also need client validation. Therefor we add our new validator to the Episerver Forms validators list.
Be sure to use the full namespace as the validator name.

The property validatorMetaData.model contains our validation model. fieldValue is the value entered by the user in the form.

To use the validator, we create a custom element block. In this case I simply inherit from the TextboxElementBlock.
Decorate the element block with the AvailableValidatorTypes and include our custom validator.

To load the JavaScript file for client side validation, we need to implement the IElementRequireClientResources interface on our element block. The GetExtraResources method return a list of additional resources load, specifying type and path.

That’s it. Now we can build the form and use our validator.

MinimumStringLengthValidator1 MinimumStringLengthValidator2