Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

EPiServer Forms - Empty form after POST

Vote:
 

Hi there,

I'm currently working on an EPiServer Forms implementation that shows a completely empty form after a submit with invalid data. The checkboxes for Allow anonymous submissions and Allow multiple submissions from the same IP/cookie are both checked. What is needed to make EPiServer show the wrong data in the form after a POST?

Currentlywe are using EPiServer 9.10.2 with EPiServer Forms 2.1.0.2. If at all possible I'd rather not upgrade at this time.

EDIT: I've tried the Alloy Demo site and apparently this is "normal behavior". Any idea how we can change from this behavior to our prefered behavior of showing the user what they entered?

Regards,
Patrick Bregman

#151538
Edited, Jul 27, 2016 13:30
Vote:
 

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?

#151543
Edited, Jul 27, 2016 16:46
Vote:
 

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>
#151546
Jul 28, 2016 10:33
Vote:
 

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

#151553
Jul 28, 2016 13:51
Vote:
 

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.

#151909
Aug 10, 2016 10:08
Vote:
 

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

#151979
Aug 11, 2016 13:24
Vote:
 

@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
#151980
Aug 11, 2016 13:31
Vote:
 

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.

#152087
Aug 16, 2016 9:59
* 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.