Description
What problem are you trying to solve?
I have components which have the concept of a "Server Error" and a "Client Error".
Server Error's do not affect a Form Associated Custom Elements validity, but should get cleared when a user attempts to submit a form, either by calling requestSubmit() or by a user clicking a <button type="submit">
What solutions exist today?
Patching HTMLFormElement.prototype.requestSubmit and emitting an event like "request-submit" and then having a root node click listener looking for submit buttons:
this.rootNode().addEventListener("click", (e) => {
const submitter = e.target.closest("[type='submit']")
if (submitter) {
e.dispatchEvent(new Event("request-submit", { bubbles: true, composed: false, cancelable: true }))
}
})submit event issues
form.addEventListener("submit") will never fire if the form is invalid.
invalid event issues
form.addEventListener("invalid", () => {}, {capture: true}) has multiple problems.
1.) It does not check for elements that were invalid outside of the form IE:
<form id="my-form"></form>
<input form="my-form" required>Will never trigger the "invalid" event for the form to capture.
2.) "invalid" does not account for if it was triggered by reportValidity(), checkValidity(), requestSubmit(), or clicking a submit button.
formdata event issues
Form data can be triggered by anything such as new FormData(form) and doesn't tell you how it was triggered, as far as I know.
How would you solve it?
I would like to solve it by having a "requestsubmit", "attemptsubmit", or similar event fired regardless of the validity of the form and it would fire whenever you call requestSubmit() or when a submit button attached to the form is clicked, or if the user hits Enter inside of an input.
Anything else?
Not that I can think of. I hope im not missing something obvious here.