panel/app/javascript/controllers/form_validation_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["invalid", "submitting"];

  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();

      this.show(this.submittingTargets);
      this.hide(this.invalidTargets);
    } else {
      this.element.classList.add("was-validated");
      this.hide(this.submittingTargets);
      this.show(this.invalidTargets);
    }
  }

  show(elements) {
    for (const element of elements) {
      element.classList.remove("d-none");

      setTimeout(() => element.classList.add("show"), 1);
    }
  }

  hide(elements) {
    for (const element of elements) {
      element.classList.remove("show");

      setTimeout(() => element.classList.add("d-none"), 2000);
    }
  }
}