60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
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
|
|
}
|
|
}
|