Real-time validation in EPiServer Forms


Hi, I'm using EPiServerForms 4.4.1. Do you have any suggestions how to implement real-time validation of inputs? I'm about to use validate.js plugin but I'm not sure if it's a good idea since validation requirements don't change anything in element view??

May 31, 2017 10:38

Basically, you need to select your elements to validate by ID, css classes or attributes. If you don't want to change element view, I guess you need create custom element but using original form template to render. Then you override the method GetAttributes() to render your custom attribute for the element. Example: 

[ContentType(GUID = "{83732714-6023-49A2-9AF9-F11CF1CED4D8}", GroupName = ConstantsFormsUI.FormElementGroup, Order = 2000)]
    public class MyFormElement: TextboxElementBlock
        public override Dictionary<string, string> GetAttributes()
            var dict = base.GetAttributes();
            if (!dict.ContainsKey("data-customType"))
                dict.Add("data-customType", "email");

            return dict;

You need to make your element render using existing template:

viewTemplateModelRegistrator.Add(typeof(MyFormElement), new TemplateModel
    Name = "MyFormElement",
    Inherit = true,
    AvailableWithoutTag = true,
    Path = "~/EPiServer/EPiServer.Forms/Views/ElementBlocks/TextboxElementBlock.ascx"

Now, your custom textbox will have attribute customType=email then you select the element by attribute and add validation logic into it. Of course, you can have better way to register templates instead of register one by one in my example.

Jun 01, 2017 13:17

Hmm I'd like to have something more sophisticated? In fact I've got additional issue right now. How to override models not to have validators checkboxes but radio buttons / dropdown? What I'd like to achieve is to have validators like "email, date, zipcode" as a separate property (with posibility of choosing only one of them) and "required" as another property. Is it even possible?

Jun 08, 2017 8:51

Editors should know how to combine validators together. But in order to do like you said, you need to override default editor for Validators property. Ex: 

[EditorDescriptorRegistration(TargetType = typeof(string), EditorDescriptorBehavior =EditorDescriptorBehavior.OverrideDefault, UIHint = ConstantsFormsUI.UIHint_FormsValidators)]
public class MyEditorDescriptor: EditorDescriptor
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        base.ModifyMetadata(metadata, attributes);

        var contentMetadata = (ContentDataMetadata)metadata;
        var ownerContent = contentMetadata.OwnerContent;

        // specify your editor class here ex:
        metadata.ClientEditingClass = "myproject/editors/MyValidatorsEditor";


Then you need write your "MyValidatorsEditor" display as you want (checkboxs or radio buttons or dropdown). The Validators property is stored as string (validators name speparated by "|||"). You should have debug javascript on client to see its format. This will require your more effort if you want to customize the default editor.

Jun 08, 2017 11:33
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.