mc

web/server.go

@@ -931,21 +931,21 @@ func (s *Server) handleValidateCarNumber() http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		carNumber := r.URL.Query().Get("car_number")
 		if carNumber == "" {
-			http.Error(w, "<div class='invalid-feedback alert alert-danger'>Car number is required</div>", http.StatusBadRequest)
+			http.Error(w, "<div id='car-number-validation-error' class='invalid-feedback alert alert-danger'>Car number is required</div>", http.StatusBadRequest)
 			return
 		}
 
 		isUnique, err := s.db.IsCarNumberUnique(carNumber)
 		if err != nil {
 			s.logger.Error("Failed to check car number uniqueness", "error", err)
-			http.Error(w, "<div class='invalid-feedback alert alert-danger'>Failed to validate car number</div>", http.StatusInternalServerError)
+			http.Error(w, "<div id='car-number-validation-error' class='invalid-feedback alert alert-danger'>Failed to validate car number</div>", http.StatusInternalServerError)
 			return
 		}
 
 		if !isUnique {
-			w.Write([]byte("<div class='invalid-feedback alert alert-danger'>Car number is already in use</div>"))
+			w.Write([]byte("<div id='car-number-validation-error' class='invalid-feedback alert alert-danger'>Car number is already in use</div>"))
 		} else {
-			w.Write([]byte("<div class='invalid-feedback alert alert-success'>Car number is available</div>"))
+			w.Write([]byte("<div id='car-number-validation-success' class='invalid-feedback alert alert-success'>Car number is available</div>"))
 		}
 	}
 }

web/templates/register.templ

@@ -64,10 +64,10 @@ templ RegisterForm(groups []models.Group, isAdmin bool) {
 						required
 						hx-get="/api/validate/car-number"
 						hx-trigger="change"
-						hx-target="next .invalid-feedback"
+						hx-target="#car-number-validation-error"
                         hx-swap="outerHTML"
 					/>
-					<div class="invalid-feedback"></div>
+					<div class="invalid-feedback" id="car-number-validation-error"></div>
 				</div>
 				<div class="mb-3">
 					<label for="car-weight" class="form-label">Car Weight (oz)</label>

web/templates/register_templ.go

@@ -89,7 +89,7 @@ func RegisterForm(groups []models.Group, isAdmin bool) templ.Component {
 			templ_7745c5c3_Var3 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"card\"><div class=\"card-header\"><h3 class=\"h6 mb-0\">Racer Registration</h3></div><div class=\"card-body\"><div id=\"racer-form-message\"></div><form id=\"racer-form\" hx-post=\"/api/racers\" hx-target=\"#racer-form-message\" hx-swap=\"innerHTML\" hx-on::before-request=\"return validateForm()\" hx-on::after-request=\"if(event.detail.successful &amp;&amp; !event.detail.xhr.response.includes(&#39;danger&#39;)) { \r\n\t\t\t\t\tdocument.getElementById(&#39;racer-form&#39;).reset(); \r\n\t\t\t\t\tsetTimeout(function() {\r\n\t\t\t\t\t\tdocument.getElementById(&#39;racer-form-message&#39;).innerHTML = &#39;&#39;;\r\n\t\t\t\t\t\t// Check if we&#39;re on the admin page by looking for the racers-list element\r\n\t\t\t\t\t\tif (document.getElementById(&#39;racers-list&#39;)) {\r\n\t\t\t\t\t\t\thtmx.ajax(&#39;GET&#39;, &#39;/admin/racers/list&#39;, {target: &#39;#racers-list&#39;});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}, 3000);\r\n\t\t\t\t}\"><!-- Form fields for racer registration --><div class=\"mb-3\"><label for=\"first-name\" class=\"form-label\">First Name</label> <input type=\"text\" class=\"form-control\" id=\"first-name\" name=\"first_name\" required></div><div class=\"mb-3\"><label for=\"last-name\" class=\"form-label\">Last Name</label> <input type=\"text\" class=\"form-control\" id=\"last-name\" name=\"last_name\" required></div><div class=\"mb-3\"><label for=\"car-number\" class=\"form-label\">Car Number</label> <input type=\"text\" class=\"form-control\" id=\"car-number\" name=\"car_number\" required hx-get=\"/api/validate/car-number\" hx-trigger=\"change\" hx-target=\"next .invalid-feedback\" hx-swap=\"outerHTML\"><div class=\"invalid-feedback\"></div></div><div class=\"mb-3\"><label for=\"car-weight\" class=\"form-label\">Car Weight (oz)</label> <input type=\"number\" step=\"0.01\" class=\"form-control\" id=\"car-weight\" name=\"car_weight\" required></div><div class=\"mb-3\"><label for=\"group-id\" class=\"form-label\">Group</label> <select class=\"form-select\" id=\"group-id\" name=\"group_id\" required><option value=\"\">Select a group</option> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"card\"><div class=\"card-header\"><h3 class=\"h6 mb-0\">Racer Registration</h3></div><div class=\"card-body\"><div id=\"racer-form-message\"></div><form id=\"racer-form\" hx-post=\"/api/racers\" hx-target=\"#racer-form-message\" hx-swap=\"innerHTML\" hx-on::before-request=\"return validateForm()\" hx-on::after-request=\"if(event.detail.successful &amp;&amp; !event.detail.xhr.response.includes(&#39;danger&#39;)) { \r\n\t\t\t\t\tdocument.getElementById(&#39;racer-form&#39;).reset(); \r\n\t\t\t\t\tsetTimeout(function() {\r\n\t\t\t\t\t\tdocument.getElementById(&#39;racer-form-message&#39;).innerHTML = &#39;&#39;;\r\n\t\t\t\t\t\t// Check if we&#39;re on the admin page by looking for the racers-list element\r\n\t\t\t\t\t\tif (document.getElementById(&#39;racers-list&#39;)) {\r\n\t\t\t\t\t\t\thtmx.ajax(&#39;GET&#39;, &#39;/admin/racers/list&#39;, {target: &#39;#racers-list&#39;});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}, 3000);\r\n\t\t\t\t}\"><!-- Form fields for racer registration --><div class=\"mb-3\"><label for=\"first-name\" class=\"form-label\">First Name</label> <input type=\"text\" class=\"form-control\" id=\"first-name\" name=\"first_name\" required></div><div class=\"mb-3\"><label for=\"last-name\" class=\"form-label\">Last Name</label> <input type=\"text\" class=\"form-control\" id=\"last-name\" name=\"last_name\" required></div><div class=\"mb-3\"><label for=\"car-number\" class=\"form-label\">Car Number</label> <input type=\"text\" class=\"form-control\" id=\"car-number\" name=\"car_number\" required hx-get=\"/api/validate/car-number\" hx-trigger=\"change\" hx-target=\"#car-number-validation-error\" hx-swap=\"outerHTML\"><div class=\"invalid-feedback\" id=\"car-number-validation-error\"></div></div><div class=\"mb-3\"><label for=\"car-weight\" class=\"form-label\">Car Weight (oz)</label> <input type=\"number\" step=\"0.01\" class=\"form-control\" id=\"car-weight\" name=\"car_weight\" required></div><div class=\"mb-3\"><label for=\"group-id\" class=\"form-label\">Group</label> <select class=\"form-select\" id=\"group-id\" name=\"group_id\" required><option value=\"\">Select a group</option> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}