正しい入力後でも妥当性ポップアップが実行されない

Question

私はパターン属性を使用して入力の妥当性をチェックし、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

onchangeの代わりにoninputを使用してください。

<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/