I have a form with blur-events bound to the required fields. Then there is a "Cancel" Button which simply calls an URL (button is an image with click-event).

When leaving one of the required fields a warning is written to the page saying that field xy is required. -> this causes a layout shift, meaning all the fields and the buttons are moved down a little bit because of the text inserted above.

The tricky thing is this: when the focus is in an empty but required field and you click the cancel button, the required-warning is written to the screen but the click-event on the cancel button doesn't fire. I think this is due to the layout shift. The mouse cursor doesn't hover over the button anymore, because the button scrolled down.

Has anyone a good idea how i could solve this?