clientside validation using aspnet-cient-validation library is not working (Umbraco 13.5.2 / Forms 13.3.2)

niekvanderreest commented 10 hours ago

A brief description of the issue goes here.

Setting up Umbraco Forms with Client-validation by following the documentation will always results in a post on submit, client validation will not stop a submit attempt.

Reproduction

Specifics

Umbraco 13.5.2
Umbraco Forms 13.3.2
Tested on Chrom(ium) and Edge browsers

Steps to reproduce

Clean install Umbraco 13.5.2
Create a doctype with a single RTE field.
Create a form (the contact preset will do)
Add form to RTE via macro, default theme, set exclude scripts to true
Create a view for your doctype and add the relevant helper in the page head section.
load the page and click submit without entering any form fields, notice a submit when running developer tools on network tab.

Expected result

Following the guide at https://docs.umbraco.com/umbraco-forms/13.latest/developer/prepping-frontend, I'd expect the apnet-clientside-validation script to validate the form and stop submission.

Actual result

No indication of clientside validation actually occuring, the page posts back and reloads after serverside validation, validationmessages are shown on the page, and if the form is placed one a page with vertical scroll the page will "hard" refresh and load at the top (losing scroll position)

AndyButland commented 10 hours ago

Could you share your template please so I can investigate this with as similar as possible to your setup? Thanks.

niekvanderreest commented 10 hours ago

Could you share your template please so I can investigate this with as similar as possible to your setup? Thanks.

Sure can! It contains commented the Jquery variant that I also tested against my vanilla install and which is working as expected.

@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.Home>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@using Umbraco.Forms.Web;
@{
    Layout = null;
}
<!DOCTYPE html>
<html dir="ltr">
<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js"></script>
    @Html.RenderUmbracoFormDependencies(Url)
</head>
@*<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>
</head>*@
<body>
    <div class="accessibility-wrapper">
        <a class="accessibility" href="#maincontent">Skip to Content</a>
    </div>

    <main id="maincontent">
        @Model.Value("content")
    </main>
</body>
</html>

AndyButland commented 8 hours ago

Thanks - I think you are missing the steps described on this page: https://docs.umbraco.com/umbraco-forms/13.latest/developer/rendering-scripts

If you choose to "exclude scripts" from the rendering of the form via the macro, you still need to include them somewhere on the page. Hence you need one of the snippets shown on the docs page I've linked.

niekvanderreest commented 8 hours ago

@AndyButland It seems you are correct, when i set the exclude stcripts to false, the client vamidation works as expected. I guess this was a misunderstanding of all requirements on my part.

Unreleated question, how can you assure the forms scripts are always loaded where you place the snippet if an editor can still choose to keep the "Exclude Scripts" checkbox disabled?

AndyButland commented 6 hours ago

There's not an easy technical way to do that that I can see, so would say it's more in editor training. For most sites I'd expect it would be best to include this snippet in the place you want the scripts to be rendered, and ask editors to always exclude them if they are adding via a macro.

umbraco / Umbraco.Forms.Issues