fix: validar con stimulus

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");
+    }
+  }
+}

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'

app/javascript/etc/validation.js

@@ -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')
-    })
-  })
-})

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