title: The Validity Popup Won't Go Even After Correct Input
body: <p>I've used the pattern attribute to check the validity of the input and used setCustomValidity to display a custom invalidity message.</p>
  
  <p>The following code has been used to show the invalidity popup for the invite code field:</p>
  
  <pre><code>&lt;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){}"/&gt;
  </code></pre>
  
  <p>Please find snapshots here:</p>
  
  <p><a href="http://i.stack.imgur.com/XO2Ia.png" rel="nofollow">Invalid Input</a> || 
  <a href="http://i.stack.imgur.com/1ZvDj.png" rel="nofollow">Valid Input</a></p>
  
  <p>The problem here is that, the invalidity popup should disappear once the user starts inputting a new value, but this isn't happening.</p>
  
  <p>Please help me out.</p>
  
  <p>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.</p>