Search Overlay – Replace client-side JavaScript validation

Good Morning Happy New Year, I am back with another accessibility issue which has come back from a retest. For the search overlay which is causing the issues below, where they say “The HTML5 validation must be removed and replaced with client-side JavaScript validation” Is that something we can do to maybe address some of the issues below?

<p>The form uses native HTML5 data validation. The error messages are initially displayed next to the appropriate textbox. However, there are two issues:</p>

1. If the page is scrolled in Chrome, the popup error message remains visible and moves with the form control as long as the error message remains within the viewport. However, if the page is scrolled far enough for the popup error message to be outside the viewport, it disappears automatically and does not reappear when the page is scrolled back again.
2. If the page is scrolled in Firefox, the textboxes move but the error messages do not, so the error messages are no longer associated with the appropriate textbox.

<p>The HTML5 validation must be removed and replaced with client-side JavaScript validation and server-side validation (in case JavaScript is not enabled in a user’s browser).</p>
<p><br />18 December 2024: Not fixed. The overlay now fills the screen and is only scrollable at certain browser zoom levels. This is sufficient to prevent the issue with Chrome, but the issue with Firefox still occurs. Also, we have reported a new issue with the HTML5 validation that reinforces the need to replace it – see cell G92.</p>

Thanks as always