panel/app/javascript/controllers/form_validation_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  connect() {
    this.element.setAttribute("novalidate", true);

    for (const input of this.element.elements) {
      if (input.type === "button" || input.type === "submit") continue;

      if (input.dataset.action) {
        input.dataset.action = `${input.dataset.action} htmx:validation:validate->form-validation#submit`;
      } else {
        input.dataset.action = "htmx:validation:validate->form-validation#submit";
      }
    }
  }

  submit(event = undefined) {
    event?.preventDefault();
    event?.stopPropagation();

    if (this.element.reportValidity()) {
      this.element.classList.remove("was-validated");
      this.element.submit();
    } else {
      this.element.classList.add("was-validated");
    }
  }
}