HTML5 form validation in Firefox

Question

I am trying to get the validation to work correctly in Firefox. It works fine in Chrome and Safari. In the simplest example in pure HTML, everything looks ok until I click the submit button a second time without leaving the input data.

<form onsubmit="javascript:return false;">
    <input type="text" name="name" pattern=".{5,20}" required />
    <button type="submit">Submit</button>
</form>

How to reproduce this (in Firefox):

Please click the submit button, and see that the validation shows up correctly. Please then click anywhere on the page (body or input, but not the button), and then click the submit button again to see the validation still shows correctly. If you click the button again once the validation is showing it stopps working and never back until the page is refreshed.

I am looking for some workaround for this situation so that I am not leaving the user with the inability to submit the form without giving error message.

I tried calling reportValidity() but it also stops working at this point. The properties input.validity and input.validationMessage have the correct values, but the error does not show.

I would appreciate any hints. Thanks.