demo · v149

Validation Relay

A custom <submit-pill> that uses HTMLSubmitButtonBehavior to submit a form — and also relays the form's validity through ElementInternals. When any required field is empty, the pill goes grey and refuses to submit, the same way a native <button type=submit> would.

Note: HTMLSubmitButtonBehavior isn't available in this browser. The pill will visually render and the form's validation still runs, but submission via the pill won't activate the form. Try Chrome 149+.

events

code

class SubmitPill extends HTMLElement {
  static formAssociated = true;
  #internals;
  constructor() {
    super();
    // Two behaviors:
    //   submit-button   — fire form submission on activation
    //   form-associated — participate in validation
    this.#internals = this.attachInternals({
      behaviors: [HTMLSubmitButtonBehavior]
    });
  }
  connectedCallback() {
    const f = this.#internals.form;
    f?.addEventListener('input', () => this.#reflect());
    this.#reflect();
  }
  #reflect() {
    const f = this.#internals.form;
    this.toggleAttribute('disabled', !!(f && !f.checkValidity()));
  }
}
customElements.define('submit-pill', SubmitPill);

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

events

code

see also

implementation reference