Das Gültigkeits-Popup wird auch nach korrekter Eingabe nicht ausgeführt

Question

Ich habe das Musterattribut verwendet, um die Gültigkeit der Eingabe zu überprüfen, und setCustomValidity verwendet, um eine benutzerdefinierte Invaliditätsnachricht anzuzeigen.

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

finden Sie Schnappschüsse hier:

Der folgende Code wurde die Ungültigkeit Popup für den laden Codefeld zu zeigen, verwendet

Invalid Input || Valid Input

Das Problem hier ist, dass das Invaliditäts-Popup verschwindet, sobald der Benutzer beginnt, einen neuen Wert einzugeben, aber dies geschieht nicht.

Bitte helfen Sie mir.

P.S. - Ich benutze Wordpress und ich kann AJAX nicht einfach zur Validierung verwenden. Ich darf auch keine Plugins verwenden. Bitte antworte entsprechend.

Answer 1

Verwenden Sie oninput anstelle von 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){}"/> 

Beispiel: https://jsfiddle.net/173qpqte/