https://resources.better.org.uk/assets/gll_component_library/controllers/form_readiness_controller-df033389.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="form-readiness"
4// Disables the submit until every field in the form has a value (honouring
5// minlength). The submit renders enabled so no-JS users are never trapped;
6// wire fields via bubbled events:
7// data-action="input->form-readiness#refresh change->form-readiness#refresh"
8export default class extends Controller {
9  static targets = ["submit"]
10
11  connect() {
12    this.refresh()
13  }
14
15  refresh() {
16    if (this.hasSubmitTarget) this.submitTarget.disabled = !this.ready()
17  }
18
19  ready() {
20    const fields = this.element.querySelectorAll("select, input:not([type=submit]):not([type=hidden])")
21    return Array.from(fields).every((field) => this.filled(field))
22  }
23
24  filled(field) {
25    const min = Math.max(field.minLength || 0, 1)
26    return field.value.trim().length >= min
27  }
28}