Extending the default form validation

[DeanRITS]

Hi,

I am doing a POC with Umbraco Forms and I have a requirement to run some complex client side business rules when a user is moving between pages of a form.

So far, I have overridden the default themes Script.cshtml file and modified it to render a custom JS script which is working.

I am then attempting to run some custom validation when the form is submitted by hooking into the asp-net-validation library as documented here:

https://github.com/haacked/aspnet-client-validation?tab=readme-ov-file#subscribing-to-client-form-validation-event

However, the "validation" event never fires.

I've also tried attaching a "submit" event like below but seem to run into issues:

const formElement = document.querySelector("[data-page-id='abfa8200-c8c7-46b1-a677-b7e50399f6fd']");
formElement.addEventListener("submit", async (e) => {

    const form = e.target;
    e.preventDefault();
    e.stopImmediatePropagation();

    var isValid = window.umbracoFormsValidationService.isValid(form) && runCustomValidation(form);

    if (isValid) {
        form.submit();
        return true;
    }

    return false;
});

1.) If I use preventDefault() and the custom validation fails, my form buttons are disabled.
2.) If I return false without preventing the default event, the form submits anyway.

Can you provide any suggestions or code samples on how correctly hook into the validation pipeline?

Thanks,
Dean

---

This item has been added to our backlog AB#43271

[ronaldbarendse]

Hi Dean! We've recently added advanced validation rules, which might provide a built-in solution for your custom validation rules. Otherwise, I'd suggest extending the aspnet-client-validation library using custom validation providers, instead of trying to intercept the submit event (Forms uses a custom implementation that disables the submit buttons to prevent duplicate submissions).