ray
1.7 KiB
FormValidator Silent Failure Pattern
The bug: A FormValidator is initialized with element IDs that don't match the actual HTML. Every document.getElementById() returns null. The validator's validateForm() silently returns false on every call. The save function is never reached. No error, no notification — just nothing.
Where it happened: Edit Service modal (#service-edit-modal-quote) in quote-tab-manager.js
The mismatch:
| Validator expected | Actual HTML ID |
|---|---|
service-edit-form |
service-edit-form-quote |
service-edit-name |
service-edit-name-quote |
service-edit-price |
service-edit-price-quote |
service-edit-recommendation |
service-edit-recommendation-quote |
The Edit Service modal HTML uses -quote suffixed IDs to distinguish from the Settings modal's elements. The validator was written for the Settings modal's naming convention.
Fix: For the Edit Service modal, bypass the FormValidator entirely and call saveServiceEdit() directly. The save function has its own robust validation with user-visible error notifications. The FormValidator is optional visual feedback, not a required gate.
Prevention: When adding a new modal or form, audit all three layers:
- HTML element IDs
- JS
getElementById()lookups (check for||fallback chains) - Any validators that reference those IDs
Create a simple grep check:
# List all element IDs referenced in JS that don't exist in HTML
grep -oP "getElementById\('([^']+)'\)" quote-tab-manager.js | sort -u | while read line; do
id=$(echo "$line" | grep -oP "(?<=')[^']+(?=')")
grep -q "id=\"$id\"" repair-orders.html || echo "MISSING in HTML: $id"
done