Okay, part of the issue was probably that all the default classes (e.g. Form__Element, FormTextbox etc.) were removed. I've added those back in but still no luck. The HTML of the templates was modified like this:

<div class="Form__Element FormTextbox form-item form-item-inline @formElement.Code @Model.GetValidationCssClasses()" data-epiforms-element-name="@formElement.Code">
	<div class="form-label-wrapper">
		<label class="form-item-label" for="@formElement.Guid">@labelText</label>
	</div>
	<div class="form-item-wrapper">
		<input class="form-item-control" id="@formElement.Guid" name="@formElement.Code" placeholder="@Model.PlaceHolder" type="text" value="@Model.PredefinedValue" @Html.Raw(formElement.AttributesString) />
		<span data-epiforms-linked-name="@formElement.Code" class="Form__Element__ValidationError" style="display: none;">*</span>
	</div>
	<div class="form-item-error">
		<span class="field-validation-valid" data-valmsg-for="@formElement.Guid" data-valmsg-replace="true"></span>
	</div>
</div>

The original HTML, for reference, seems to have been:

<div class="Form__Element FormTextbox @Model.GetValidationCssClasses()" data-epiforms-element-name="@formElement.Code">
	<label for="@formElement.Guid" class="Form__Element__Caption">@labelText</label>
	<input name="@formElement.Code" id="@formElement.Guid" type="text" class="FormTextbox__Input"
			placeholder="@Model.PlaceHolder" value="@Model.PredefinedValue" @Html.Raw(formElement.AttributesString) />

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

What am I still missing?

Okay, figured out the HTML has to be changed. This works to block the form from submitting, but the validation isn't showing yet. Current HTML is:

@using EPiServer.Forms.Helpers
@using EPiServer.Forms.Implementation.Elements
@model UrlElementBlock
@{
    var formElement = Model.FormElement;
    var labelText = Model.Label;
}

<div class="Form__Element FormTextbox FormTextbox--Url form-item form-item-inline @formElement.Code @Model.GetValidationCssClasses()" data-epiforms-element-name="@formElement.Code">
    <div class="form-label-wrapper">
        <label class="form-item-label" for="@formElement.Guid">@labelText</label>
    </div>
    <div class="form-item-wrapper">
        <input class="form-item-control" id="@formElement.Guid" name="@formElement.Code" placeholder="@Model.PlaceHolder" type="url" value="@Model.PredefinedValue" @Html.Raw(formElement.AttributesString) />
        <span data-epiforms-linked-name="@formElement.Code" class="Form__Element__ValidationError" style="display: none;">*</span>
    </div>
    <div class="form-item-error">
        <span class="field-validation-valid" data-valmsg-for="textbox1_e8393c313f3f4a82a4eedfb47aef860e" data-valmsg-replace="true"></span>
    </div>
</div>

Scratch that, it doesn't block anything, the form wasn't build properly. Still no sign of EPiServer validation unfortunately :( Any hints?

Hi, we have not seen the issue "shows a completely empty form after a submit with invalid data". It might happen when you make custom-form-element.

EPiServer Forms 2.1.0.2. If at all possible I'd rather not upgrade at this time. Are there anything block you from using Forms 3? You are still in development phase and the main reason for introducing Forms 3 is more developer-friendly than Forms 2.

Please don't hesitate to file a SupportCase, so we can jump into your custom solution and figure out the problem with you.

Thach Lockevn.

Thach, the same issue is also showing in the Alloy demo site (with regards to the form submit with invalid data giving an empty form). Maybe this is fixed in 3.0, that would be nice.

In regards to the upgrade, I am not sure we can do that as I am not the lead developer. I have asked the lead developer for his opinion (with your arguments that it is more developer friendly) so I hope we can upgrade. I'm a fan of your biweekly releases, and I hope to implement that at this customer as well. We already have a support case for this with number 40267.

Thanks,
Patrick

@Patrick, thanks for your support.

You can give my word to your lead developer, if you are in development process, upgrading from Forms 2 to 3 brings more benefit and less hassle.

• It is more well-structure
• open more API to the developer
• more API are contain in service-classes, which is easier to re-use, overide, extend
• lot of bug fixes
• separated of packages, you might only have to refer to EPiServer.Forms.Core, which contain interface, serivces and base classes
• UI package is related to UI, EditView
• Forms package provide out of the box Elements and implementation

Even you are close to the end of development process, upgrade from 2 to 3 only cost you

• a few rename (less than 5 classes)
• class rename or obsoleted (with clear and easy-to-fix warning)
• a few Ctrl .  stroke for using new class in new namespace

Hi Patrick

The problem solved. The reason why our validation does not work comes from your missing of "EPiServerForms" css class for the <form> element in the file FormContainerBlock.cshtml located within the folder Shared/EpiForms. Your missing causes our data initialization process not to work as expected because we need to scan all form elements of the form element and their validation info by using $('.EPiServerForms').

Your code
<form method="post" enctype="multipart/form-data" class="form @validationFailCssClass" data-epiforms-type="form" id="@Model.Form.FormGuid">

It should be

<form method="post" enctype="multipart/form-data" class="EPiServerForms @validationFailCssClass" data-epiforms-type="form" id="@Model.Form.FormGuid">

I edited the file as described above and saw that our data validation works well. At your Alloy site, I can see that you no longer use our  our .ascx files within the EPiServer.Forms/Views/ElementBlock folder. Instead, the csthml files within Shared/EpiForms are used to render our form controls. Therefore, the reason abvoe should explain why Alloy site does not work as expected.

P/S: Our data validation still works well at server side and validation messages are shown regardless of the EPiServerForms css class, which means that your site still works well in non-js mode. I tested and verified this.

Please, let me know if some unexpected things happen or I have misunderstood something.

Best Regards.

Hung Phan.