有效性弹出窗口获胜't输入正确后仍保持平稳

我已经使用模式属性来检查输入的有效性，并使用setCustomValidity来显示自定义无效消息。

以下代码已用于显示邀请代码字段的无效弹出窗口：

<input class  = "custom_form_field_input" type="text" name="inviteCode" minlength = "6" required maxlength = "6" value="" required pattern="[0-9a-zA-Z]+" autocomplete="off" oninvalid="setCustomValidity('Please enter your 6 digit Invitation Code')" onchange="try{setCustomValidity('')}catch(e){}"/>

请在此处查找快照：

无效输入||有效输入

这里的问题是，一旦用户开始输入新值，无效弹出窗口就会消失，但这并没有发生。

请帮帮我。

附言：我正在使用Wordpress，我不能轻易地使用AJAX进行验证。我也不允许使用插件。请作出相应回答。