Benutzerdefinierte Validierungsnachrichten werden angezeigt, selbst wenn die Eingabe gültig ist

Question

Ich versuche, eine eigene ungültige Fehlermeldung für die Eingabe type='email' zu definieren.

Ich benutze die folgende HTML. Das Problem ist, dass ich beim Übermitteln der Eingabe die benutzerdefinierte Fehlermeldung erhalten, wenn der Eingabewert gültig ist.

<input name="resp_mail" required="required" onchange="try{setCustomValidity(' ')}catch(e){}" onkeypress="try{setCustomValidity(' ')}catch(e){}" oninvalid="setCustomValidity('Custom error message')" type="email" placeholder="Enter mail" /> 

Auch this fiddle

Answer 1

sehen Wenn Sie die Reihenfolge ändern, für Onchange die oninvalid ersten und entfernen Sie den Raum zu haben und onkeypress es mir scheinen, dass es funktioniert.

<input 
    name="resp_mail" 
    required="required" 
    oninvalid="setCustomValidity('Custom error message')" 
    onchange="try{setCustomValidity('')}catch(e){}" 
    onkeypress="try{setCustomValidity('')}catch(e){}" 
    type="email" 
    placeholder="Enter mail" 
/>