12

Javascriptを介し:invalidて要素の疑似クラスの「外観」を検出する方法はありますか?input

言い換えれば、:invalid疑似クラスがinput要素に表示されたときに、どのようにして Javascript コードを実行するようにトリガーできるのでしょうか?

4

1 に答える 1

17

リッスンできる無効なイベントが発生します。

送信可能な要素がチェックされ、その制約を満たさない場合、無効なイベントが発生します。送信可能な要素の有効性は、所有者フォームを送信する前、または要素またはその所有者フォームの checkValidity() が呼び出された後にチェックされます。

https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/invalid

要素の妥当性をチェックするためにアクセスできるプロパティもいくつかあります。

.validity.valid

要素はすべての制約検証を満たしているため、有効であると見なされます。

https://developer.mozilla.org/en-US/docs/DOM/ValidityState

編集：この質問に答えてから、いくつかのことを学びました...

これ.validity.validは実際にはConstraint Constraint Validation APIの一部であり、そのサポートはせいぜいむらがあり、残念です (その API には多くの優れた機能があります) 。

ただし、うまく機能しているように見えるのはquerySelectorAll(':invalid')で、現在無効なすべてのフォーム要素の非ライブ NodeList を返します。addEventListener('change'フォーム要素で ..etc などを呼び出し、それが起動するたびに有効性を照会できます。

于 2013-04-04T13:36:43.447 に答える