From 4e473dd2cbb591d7c7049f766b8a824eedc6b839 Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Wed, 19 Jun 2024 13:12:54 -0300
Subject: [PATCH] fix: validar con stimulus

---
 .../controllers/form_validation_controller.js | 29 ++++++++++++++++
 app/javascript/etc/index.js                   |  1 -
 app/javascript/etc/validation.js              | 34 -------------------
 app/views/posts/_form.haml                    |  2 +-
 4 files changed, 30 insertions(+), 36 deletions(-)
 create mode 100644 app/javascript/controllers/form_validation_controller.js
 delete mode 100644 app/javascript/etc/validation.js

diff --git a/app/javascript/controllers/form_validation_controller.js b/app/javascript/controllers/form_validation_controller.js
new file mode 100644
index 00000000..fe65934e
--- /dev/null
+++ b/app/javascript/controllers/form_validation_controller.js
@@ -0,0 +1,29 @@
+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");
+    }
+  }
+}
diff --git a/app/javascript/etc/index.js b/app/javascript/etc/index.js
index 3a1ef75c..641d8085 100644
--- a/app/javascript/etc/index.js
+++ b/app/javascript/etc/index.js
@@ -4,6 +4,5 @@ import './input-tag'
 import './prosemirror'
 import './timezone'
 import './turbolinks-anchors'
-import './validation'
 import './new_editor'
 import './htmx_abort'
diff --git a/app/javascript/etc/validation.js b/app/javascript/etc/validation.js
deleted file mode 100644
index 5a48148f..00000000
--- a/app/javascript/etc/validation.js
+++ /dev/null
@@ -1,34 +0,0 @@
-document.addEventListener('turbolinks:load', () => {
-  // Al enviar el formulario del artículo, aplicar la validación
-  // localmente y actualizar los comentarios para lectores de pantalla.
-  document.querySelectorAll('form').forEach(form => {
-    form.addEventListener('submit', event => {
-      const invalid_help = form.querySelectorAll('.invalid-help')
-      const sending_help = form.querySelectorAll('.sending-help')
-
-      invalid_help.forEach(i => i.classList.add('d-none'))
-      sending_help.forEach(i => i.classList.add('d-none'))
-
-      form.querySelectorAll('[aria-invalid="true"]').forEach(aria => {
-        aria.setAttribute('aria-invalid', false)
-        aria.setAttribute('aria-describedby', aria.parentElement.querySelector('.feedback').id)
-      })
-
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-
-        invalid_help.forEach(i => i.classList.remove('d-none'))
-
-        form.querySelectorAll(':invalid').forEach(invalid => {
-          invalid.setAttribute('aria-invalid', true)
-          invalid.setAttribute('aria-describedby', invalid.parentElement.querySelector('.invalid-feedback').id)
-        })
-      } else {
-        sending_help.forEach(i => i.classList.remove('d-none'))
-      }
-
-      form.classList.add('was-validated')
-    })
-  })
-})
diff --git a/app/views/posts/_form.haml b/app/views/posts/_form.haml
index 8a86d203..aa8f3d1d 100644
--- a/app/views/posts/_form.haml
+++ b/app/views/posts/_form.haml
@@ -33,7 +33,7 @@
 - dir = t("locales.#{@locale}.dir")
 
 -# Comienza el formulario
-= form_tag url, method: method, class: "form post #{extra_class}", multipart: true, data: { controller: 'unsaved-changes', action: 'unsaved-changes#submit beforeunload@window->unsaved-changes#unsaved turbolinks:before-visit@window->unsaved-changes#unsavedTurbolinks', 'unsaved-changes-confirm-value': t('.confirm') } do
+= form_tag url, method: method, class: "form post #{extra_class}", multipart: true, data: { controller: 'unsaved-changes form-validation', action: 'unsaved-changes#submit form-validation#submit beforeunload@window->unsaved-changes#unsaved turbolinks:before-visit@window->unsaved-changes#unsavedTurbolinks', 'unsaved-changes-confirm-value': t('.confirm') } do
   -# Botones de guardado
   = render 'posts/submit', site: site, post: post