The Validity Popup Won't Go Even After Correct Input

I've used the pattern attribute to check the validity of the input and used setCustomValidity to display a custom invalidity message.

The following code has been used to show the invalidity popup for the invite code field:

<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){}"/>

Please find snapshots here:

Invalid Input || Valid Input

The problem here is that, the invalidity popup should disappear once the user starts inputting a new value, but this isn't happening.

Please help me out.

P.S. - I'm using Wordpress and I cannot easily use AJAX for validation. I am also not allowed to use plugins. Please answer accordingly.

via Chebli Mohamed