The setCustomValidity() method is the most powerful primitive in HTML's constraint validation API, yet it is heavily underused in practice, primarily because it has no declarative attribute equivalent, making it incompatible with how reactive frameworks (React, Vue, Svelte) manage element state.
The lack of an attribute forces developers to escape to imperative DOM manipulation via refs and layout effects. In practice, most skip the native API entirely and reach for third-party form validation libraries instead.
This proposal adds a customvalidity attribute to all form-associated elements, whose semantics mirror setCustomValidity() exactly: empty string means valid, non-empty string means invalid with that message.
The full proposal has been filed at WICG/proposals: WICG/proposals#276
Please share any feedback or whether there's interest in incubating this here :)
The
setCustomValidity()method is the most powerful primitive in HTML's constraint validation API, yet it is heavily underused in practice, primarily because it has no declarative attribute equivalent, making it incompatible with how reactive frameworks (React, Vue, Svelte) manage element state.The lack of an attribute forces developers to escape to imperative DOM manipulation via refs and layout effects. In practice, most skip the native API entirely and reach for third-party form validation libraries instead.
This proposal adds a
customvalidityattribute to all form-associated elements, whose semantics mirrorsetCustomValidity()exactly: empty string means valid, non-empty string means invalid with that message.The full proposal has been filed at WICG/proposals: WICG/proposals#276
Please share any feedback or whether there's interest in incubating this here :)