Fix Stimulus validation to prevent submission instead of running after

Changed validation to run on turbo:submit (before submission) instead of
turbo:submit-end (after submission). Now prevents form submission and shows
client-side errors when fields are empty, instead of trying to show errors
after the server has already responded.

This fixes the Stimulus/Turbo RSpec tests that expect validation errors to
display when form fields are empty.

Author: justin808

app/views/comments/turbo/_horizontal_form.html.erb

@@ -4,7 +4,7 @@
 
   <hr />
 
-  <%= form_with(model: @comment, data: { action: "turbo:submit-end->comments#resetText" }, class: "form-horizontal flex flex-col gap-4") do |f| %>
+  <%= form_with(model: @comment, data: { action: "turbo:submit->comments#resetText" }, class: "form-horizontal flex flex-col gap-4") do |f| %>
     <div class="form-group flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
         <%= f.label "Name", class: "w-full lg:w-2/12 lg:text-end shrink-0" %>
         <%= f.text_field :author, data: { comments_target: "commentAuthor" }, class: "px-3 py-1 leading-4 border border-gray-300 rounded w-full", placeholder: "Your Name" %>

app/views/comments/turbo/_inline_form.html.erb

@@ -4,7 +4,7 @@
 
   <hr />
 
-  <%= form_with(model: @comment, data: { action: "turbo:submit-end->comments#resetText" }, class: "form-inline flex flex-col lg:flex-row flex-wrap gap-4") do |f| %>
+  <%= form_with(model: @comment, data: { action: "turbo:submit->comments#resetText" }, class: "form-inline flex flex-col lg:flex-row flex-wrap gap-4") do |f| %>
     <div class="flex gap-2 items-center">
       <%= f.label "Name", class: "form-label mr-15" %>
       <%= f.text_field :author, data: { comments_target: "commentAuthor" }, class: "px-3 py-1 leading-4 border border-gray-300 rounded", placeholder: "Your Name" %>

app/views/comments/turbo/_stacked_form.html.erb

@@ -4,7 +4,7 @@
 
   <hr />
 
-  <%= form_with(model: @comment, data: { action: "turbo:submit-end->comments#resetText" }, class: "flex flex-col gap-4") do |f| %>
+  <%= form_with(model: @comment, data: { action: "turbo:submit->comments#resetText" }, class: "flex flex-col gap-4") do |f| %>
     <div class="flex flex-col gap-0">
       <%= f.label "Name", class: "w-full" %>
       <%= f.text_field :author, data: { comments_target: "commentAuthor" }, class: "px-3 py-1 leading-4 border border-gray-300 rounded w-full", placeholder: "Your Name" %>

client/app/controllers/comments_controller.js

@@ -10,16 +10,22 @@ marked.use(mangle());
 export default class extends Controller {
   static targets = ['commentList', 'commentAuthor', 'commentText', 'commentRefresh', 'alertDiv', 'errorList'];
 
-  resetText() {
+  resetText(event) {
     const inputAuthor = this.commentAuthorTarget;
     const inputText = this.commentTextTarget;
     const alertDiv = this.alertDivTarget;
     const errorList = this.errorListTarget;
 
     const errors = [];
 
+    // Clear previous errors
+    errorList.innerHTML = '';
+    alertDiv.classList.add('hidden');
+
     if (!inputAuthor.value || !inputText.value) {
-      errorList.innerHTML = '';
+      // Prevent form submission if validation fails
+      event.preventDefault();
+
       if (!inputAuthor.value) {
         errors.push('Author');
       }
@@ -31,11 +37,6 @@ export default class extends Controller {
         errorList.insertAdjacentHTML('afterbegin', errorString);
       });
       alertDiv.classList.remove('hidden');
-    } else {
-      alertDiv.classList.add('hidden');
-      errorList.innerHTML = '';
-      inputText.value = '';
-      this.refreshCommentList();
     }
   }