Custom DateTime Form Element Not Working With Confirmation Message


Hi guys,

Have quite a strange issue where a form is being prevented from submitting due to the following console log error

this issue appears when a confirmation message is set and the tickbox to "Show a summary confirmation message after submission" is ticked and I also have a custom datetime form element which has been exactly replicated as a normal datetime element but with a seperate configuration property.

If anyone could assist it'd be most appreciated!

Many thanks


Nov 01, 2018 13:54

Hi David,

Thanks for your information. Which Forms version are you using ? Can you provide us the code of custom datetime element  so that we can investigate ?

Nov 05, 2018 11:57

Hi Quan,

I'm using version 4.10.0

I've modified my code to work in .cshtml file rather an .ashx file, the logic should all be exactly the same however..

@using EPiServer.Forms.Helpers.Internal  
@using EPiServer.Forms.Samples.EditView
@model EpiServer.Models.Blocks.Forms.DipsDateTimeElementBlock

      var formElement = Model.FormElement;
      var labelText = Model.Label;
      var errorMessage = Model.GetErrorMessage();

<div class="Form__Element Form__CustomElement FormDateTime @Model.GetValidationCssClasses()" data-epiforms-element-name="@formElement.ElementName">
<label for="@formElement.Guid" class="Form__Element__Caption">@labelText</label>
<input name="@formElement.ElementName" id="@formElement.Guid" type="text" class="Form__CustomInput FormDateTime__Input"
       placeholder="@Model.PlaceHolder" value="@Model.GetDefaultValue()" @Model.AttributesString />

<span data-epiforms-linked-name="@formElement.ElementName" class="Form__Element__ValidationError" style="@(string.IsNullOrEmpty(errorMessage) ? "display:none" : "" )">@errorMessage</span>
  @if (!EPiServer.Editor.PageEditing.PageIsInEditMode)
  // push this Element information to a global blob. Then Samples.js will init them all at once.
    var pickerType = ((DateTimePickerType) Model.PickerType).ToString().ToLower();

    <script type="text/javascript">
       var __SamplesDateTimeElements = __SamplesDateTimeElements || [];
         guid: "@formElement.Guid",
         pickerType: "@pickerType"

Can provide the C# code of the block itself if need be, simply inherits from the DateTimeElementBlock and has an extra property as mentioned..

Nov 05, 2018 12:04

Hi David, 

Yes please provide all extra properties. I'm trying to reproduce the error now and will be back here soon.

Nov 05, 2018 12:14
namespace Redweb.EpiServer.Models.Blocks.Forms
    using System.ComponentModel.DataAnnotations;
    using Attributes;
    using EditorProperties;
    using Enumerations;
    using EPiServer.Core;
    using EPiServer.DataAbstraction;
    using EPiServer.DataAnnotations;
    using EPiServer.Forms.Samples.Implementation.Elements;
    using EPiServer.Shell.ObjectEditing;

    /// <summary>
    /// The DIPS DateTime form element block.
    /// </summary>
    /// <seealso cref="EPiServer.Forms.Samples.Implementation.Elements.DateTimeElementBlock" />
        DisplayName = "DIPS Date Time",
        GUID = "{13D43BE2-05B5-4972-ABEE-70F2A815777E}",
        Description = "Date time input form element specifically for DIPS forms",
        GroupName = "DIPS Form",
        Order = 5000)]
    public class DipsDateTimeElementBlock : DateTimeElementBlock
        /// <summary>
        /// Gets or sets the dips mapping property.
        /// </summary>
        /// <value>The dips mapping property.</value>
            Name = "DIPS Mapping Property",
            Description = "The DIPS form property this element maps to",
            GroupName = SystemTabNames.Content,
            Order = 10
        [EditorDescriptor(EditorDescriptorType = typeof(EnumEditorDescriptor<DipsFormElement>))]
        public virtual DipsFormElement DipsMappingProperty { get; set; }

No worries - let me know if you have any questions regarding the code

Nov 05, 2018 12:24

Looking your error in console, it seems that you are creating custom element and forgot to register method for binding data into your controls, something look like:

CustomBindingElements: {
            "EPiServer.Forms.Samples.Implementation.Elements.DateTimeElementBlock": function (elementInfo, val) {


Pleases see the Forms Sample for details how to do that:

Nov 06, 2018 3:43

Yes, Dac Thach's answer seems to be right.

Edited, Nov 06, 2018 3:48

Brilliant thanks guys!

Nov 06, 2018 10:32
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* 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.