Consent Form

consent-form-field-validator.js

if (typeof $$epiforms !== 'undefined') {
    (function($) {
        var originalGetCustomElementValue = epi.EPiServer.Forms.Extension.getCustomElementValue;
        var privacyConsentValidate = function(fieldName, fieldValue, validatorMetaData) {
            if ($("div[data-epiforms-element-name='" + fieldName + "']").hasClass("ValidationRequired") === true) {
                if (fieldValue.length > 0) {
                    return { isValid: true };
                } else {
                    return { isValid: false, message: validatorMetaData.model.message };
                }
            }
            return { isValid: true };

        };

        $.extend(true,
            epi.EPiServer.Forms,
            {
                Validators: {
                    "EpiCustomFormFieldMapping.Models.Blocks.ConsentValidator":
                        privacyConsentValidate
                },
                CustomBindingElements: {
                    "EpiCustomFormFieldMapping.Models.Blocks.ConsentElementBlock": function(elementInfo,
                        val) {
                        var privacyAgreed = JSON.parse(val);
                        return privacyAgreed.agreed;
                    }
                },
                Extension: {
                    getCustomElementValue: function($element) {
                        if ($element.hasClass("Form_Privacy")) {
                            var $input = $('.FormChoice__Input', $element);
                            return $input.Value;
                        }
                        // if current element is not our job, let others process
                        return originalGetCustomElementValue.apply(this, [$element]);
                    }
                }

            });
    })($$epiforms || $);
};

ConsentElementBlock.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web;
using EPiServer.Core;
using EPiServer.DataAnnotations;
using EPiServer.Forms;
using EPiServer.Forms.Core.Internal;
using EPiServer.Forms.Core.Models.Internal;
using EPiServer.Forms.EditView;
using EPiServer.Forms.EditView.DataAnnotations;
using EPiServer.Forms.Helpers.Internal;
using EPiServer.Forms.Implementation.Elements.BaseClasses;
using EPiServer.Forms.Implementation.Validation;


namespace EpiCustomFormFieldMapping.Models.Blocks
{
    [ContentType(DisplayName = "Consent Form Element", GUID = "be596250-fda6-43ae-af5b-ff17cb647f7a", GroupName = "Custom form elements", Order = 1000)]
    [AvailableValidatorTypes(Include = new[] { typeof(RequiredValidator) })]
    public class ConsentElementBlock : ValidatableElementBlockBase, IElementRequireClientResources, IUIExternalFieldMapping
    {
        [CultureSpecific]
        [Display(Order = 100)]
        public virtual XhtmlString ConsentText { get; set; }

        [CultureSpecific]
        [Display(Order = 110)]
        public virtual string ConsentRequired { get; set; }

        [ScaffoldColumn(false)] public override string Label { get; set; }

        [ScaffoldColumn(false)] public override string Description { get; set; }

        public override string Validators
        {
            get
            {
                var privacyValidator = typeof(ConsentValidator).FullName;
                var validators = this.GetPropertyValue(content => content.Validators);
                if (string.IsNullOrEmpty(validators))
                {
                    return privacyValidator;
                }

                return string.Concat(validators, Constants.RecordSeparator, privacyValidator);
            }

            set
            {
                this.SetPropertyValue(content => content.Validators, value);
            }
        }

        public IEnumerable<Tuple<string, string>> GetExtraResources()
        { 
            return new List<Tuple<string, string>>()
            {
                new Tuple<string, string>("script",  "/Static/js/consent-form-field-validator.js")
            };
        }

        public override object GetSubmittedValue()
        {
            var rawSubmittedData = HttpContext.Current.Request.Form;
            var isJavaScriptSupport = rawSubmittedData.Get(Constants.FormWithJavaScriptSupport);
            if (isJavaScriptSupport == "true") 
            {
                return base.GetSubmittedValue();
            }

            var privacyConsentComponents = rawSubmittedData.GetValues(Content.GetElementName());
            if (privacyConsentComponents == null || privacyConsentComponents.Length < 1)
            {
                return null;
            }

            return privacyConsentComponents[0];
        }

        public virtual object GetFormattedValue()
        { 
            var submittedValue = GetSubmittedValue() as string ?? string.Empty;
            return submittedValue;
        }

        public override ElementInfo GetElementInfo()
        {
            var baseInfo = base.GetElementInfo();
            baseInfo.CustomBinding = true;
            return baseInfo;
        }
    }
    }

ConsentElementBlock.cshtml

@model EpiCustomFormFieldMapping.Models.Blocks.ConsentElementBlock

@using System.Web.Mvc
@using EPiServer.Forms.EditView.Internal
@using EPiServer.Forms.Helpers.Internal
@using EPiServer.Forms.Implementation.Elements
@using EPiServer.ServiceLocation

@{
    var formElement = Model.FormElement;
    var validationService = ServiceLocator.Current.GetInstance<ValidationService>();
}

<div class="Form__Element Form__CustomElement Form_Privacy FormChoice form-group @validationService.GetValidationCssClasses(Model)" id="@Model.FormElement.Guid" data-epiforms-element-name="@formElement.ElementName">

    <div class="m-checkbox-container">
        <input id="@String.Format("{0}_{1}",formElement.Guid,"privacyelement")" type="checkbox" name="@formElement.ElementName" value="ConsentCollected" class="FormChoice__Input FormChoice__Input--Checkbox" />
        <label for="@String.Format("{0}_{1}",formElement.Guid,"privacyelement")" style="display: inline;">@Html.PropertyFor(x => x.ConsentText)</label>
    </div>

</div>
<span data-epiforms-linked-name="@formElement.ElementName" class="Form__Element__ValidationError" style="display: none;">*</span>