HTML setCustomValidity oninvalidとoninput説明

Question

<form method="post" action="#"> 
<input type="text" pattern=".{5,}" name="el" oninvalid="setCustomValidity('Must Be Longer Than 5 Characters')" oninput="setCustomValidity('')"/> 
<input type="submit"/> 
</form> 

ので、oninput="setCustomValidity('')"部分なしにかかわらず、それは常に「より長い5文字以内である必要があります」というエラーが表示されますので、フォームが送信されることはありません入力のが、oninput="setCustomValidity('')"すべてのものを使用してしかし、入力時に''にカスタム妥当性を設定していれば、ユーザーがキーを押すたびにoninvalidの部分が上書きされないのはなぜですか？
これはどういうことと関係があると思いますかsetCustomValidity()、いいえ？

Answer 1

5文字以上入力し、送信をクリックすると動作します。無効なイベントが少なくとも1回は発生する場合にのみ機能します。

<form method="post" action="#"> 
    <input type="text" pattern=".{5,}" name="el" 
     oninvalid="setCustomValidity('Must Be Longer Than 5 Characters');"/> 
    <input type="submit"/> 
</form> 

いくつかの基本、mdnを参照：制約が満足していないとき
oninvalidがトリガされます。
setCustomValidityメソッドを使用して検証の結果を設定します。 空の文字列は制約が満たされていることを意味し、その他の文字列はエラーを意味します。

理由：
- oninvalidイベントがtriggedされたらあなたは非空の文字列であることをsetCustomValidityを使用して結果を設定します。
- patternの条件が満たされた後でも（入力値を変更しても）、検証の結果は空ではない文字列になります。
- コードoninvalid="setCustomValidity('...')" oninput="setCustomValidity('')"では、各入力後に結果をクリアします。