feat: trigger form refresh for dob when completely entered only

2026-01-13 15:37:05 +01:00
parent f942600dd8
commit 3c61e7eaf3
2 changed files with 82 additions and 1 deletions
@@ -0,0 +1,59 @@
+import { Controller } from '@hotwired/stimulus'
+
+/**
+ * Monitors birthday input fields (day, month, year) and dispatches a custom event
+ * only when all three fields are filled with valid values.
+ *
+ * This prevents premature HTMX refreshes when users are still entering the date,
+ * improving UX by waiting until the complete date is entered.
+ */
+export default class extends Controller {
+    static targets = ['day', 'month', 'year']
+
+    /**
+     * Checks if all birthday fields are filled and dispatches a completion event.
+     *
+     * Called on input/change events from the day, month, and year fields.
+     * Only dispatches the 'birthday:complete' event when all three fields
+     * contain valid values that could form a complete date.
+     */
+    check() {
+        const day = this.dayTarget.value.trim()
+        const month = this.monthTarget.value.trim()
+        const year = this.yearTarget.value.trim()
+
+        if (false === this.isComplete(day, month, year)) {
+            return
+        }
+
+        this.element.dispatchEvent(new CustomEvent('birthday:complete', { bubbles: true }))
+    }
+
+    /**
+     * Validates that all date components are filled with plausible values.
+     *
+     * @param {string} day   The day value
+     * @param {string} month The month value
+     * @param {string} year  The year value
+     *
+     * @returns {boolean} True if all fields contain complete values
+     */
+    isComplete(day, month, year) {
+        // Day: 1-2 digits
+        if (0 === day.length || day.length > 2) {
+            return false
+        }
+
+        // Month: 1-2 digits
+        if (0 === month.length || month.length > 2) {
+            return false
+        }
+
+        // Year: exactly 4 digits for a complete year
+        if (4 !== year.length) {
+            return false
+        }
+
+        return true
+    }
+}