在正确输入后，有效性弹出窗口不会消失

Question

我已使用pattern属性检查输入的有效性，并使用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){}"/>

请在此处查找快照：

Invalid Input || Valid Input

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

请帮帮我。

P.S。 - 我使用Wordpress，我不能轻易使用AJAX进行验证。我也不允许使用插件。请相应地回答。

Answer 1

使用oninput代替onchange。

<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')" oninput="try{setCustomValidity('')}catch(e){}"/>

实施例： https://jsfiddle.net/173qpqte/