WFFM email validation outputs duplicate error message

Question

I am working with WFFM 8.1 U3 and one of the requirements was to support placeholder text on a single field (subscribe) form that is being pulled on the footer of my site. For this I have set that field type to single line text, set the form type to inline and treated the title as my placeholder text. now this worked a treat until I've tested the field with a string that does not match the validation (invalid email format) only to see the error message being thrown twice on my screen.

I tried to compare it to a working version or even to override the duplicate message with a snippet of script however WFFM seems to generate those with dynamic ID's making it impossible to pin that bogus duplicate down.

Here is how the error looks like:

And here is the Markup of the original correct message:

<span class="help-block sr-only field-validation-error" data-valmsg-for="wffm1157284166e046ff9a8421f045ffa3dc.Sections[0].Fields[0].Value" data-valmsg-replace="true"><span id="wffm1157284166e046ff9a8421f045ffa3dc_Sections_0__Fields_0__Value-error" class="">The value of the Email field is not valid.</span></span>

Duplicate message in a separate div:

<div class="popover fade left in" id="popover324467" style="top: -84.0938px; left: -255px; display: block; position: relative;"><div class="arrow" style="top: 50%;"></div><div class="popover-inner"><div class="popover-content">The value of the Email field is not valid.</div></div></div>

Any ideas or suggestion how to overcome this would be appreciated.

Answer 1

By default it renders a message below the field and on top of the form.

If you are using MVC you can comment or set display:none to the following code block in Views/Form/EditorTemplates/FormViewModel.cshtml

    //remove those ugly errors from the top of the form
    <div style="display:none">
        <div class="has-error has-feedback">
            @Html.BootstrapValidationSammary(false)
        </div>
    </div>

Answer 2

In Views/Form/EditorTemplates/FormViewModel.cshtml:

Changing the value of Html.EnableUnobtrusiveJavaScript(true); to false fixed this issue and now only one validation message appears for invalid values.