入力が有効であっても、カスタム検証メッセージがポップアップする

Question

入力type='email'に対して独自の無効化エラーメッセージを定義しようとしています。

私は以下のHTMLを使用します。問題は、入力値を送信するときに、入力値が有効であれば私はカスタムエラーメッセージEVENを得ることです。あなたがoninvalid最初を持ってのonchangeのためのスペースを削除し、動作することを私には思えるONKEYPRESSする順序を変更した場合

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

またthis fiddle

Answer 1

を参照してください。

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