Update to form validation in #1182 has removed form submit event

[kieron-mcintyre]

The update in #1182 has resulted in a form's submit event not being raised when submitted.

The following code has been implemented and will trigger the form to be submitted but it will not raise a submit event:

form.submit();

This is an issue because there will be sites which rely on the the submit event for form and field manipulation, tracking etc.

Solution

Using form.requestSubmit() instead of form.submit() in following code will do the same and raise the form's submit event:

 const clickHandler = (e: Event) => {
	 e.preventDefault();
	 const form = input.closest('form') as HTMLFormElement;

	 validationService.validateForm(form, (valid) => {
		 if (valid) { 
			 form.requestSubmit(input);
			 input.setAttribute("disabled", "disabled");  
		 }
	 }); 
 }

input.addEventListener("click", clickHandler);

The details of this are found here:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit and
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit#usage_notes

Browser Support

Given that form.requestSubmit() is not supported by older browsers (https://caniuse.com/?search=requestSubmit), it might be worth considering implementing a polyfill, e.g. https://github.com/javan/form-request-submit-polyfill.

[AndyButland]

Thanks for the report @kieron-mcintyre along of course with the suggested resolution and additional detail. We'll apply this from the next patch to restore the previous behaviour.

Rather than polyfill - given this looks to be fairly widely supported - I was minded to use the check for availability and fallback suggested here.

[kieron-mcintyre]

@AndyButland Thanks for incorporating this. Is there a date expected for the release of this fix, please?

[AndyButland]

It's due out next Tuesday:
https://docs.umbraco.com/umbraco-forms/release-notes#id-13.1.2-april-16th-2024