Walidacja Pola Adresu
12/08/2021 00:00:00
Komentarze
1
Jeśli często zdarza Ci się tak ze Twoi klienci zapominają podać numer domu lub mieszkania i przez to masz niekompletny adres, masz już dosyć marnowania czasu na wydzwanianie do klientów aby dopytać się gdzie dokładnie masz wysłać zamówienie to ten poradnik jest dla ciebie.
const address = document.querySelector("input[name='address1']")
const addressBtn = document.querySelector("button[name='confirm-addresses']")
function ready() {
if (addressBtn) {
address.addEventListener("keyup", () => {
if (address.value.match(".*\\d.*")) {
addressBtn.removeAttribute('disabled', '')
addressBtn.setAttribute('enabled', '')
} else {
addressBtn.removeAttribute('enabled', '')
addressBtn.setAttribute('disabled', '')
}
})
}
}
document.addEventListener("DOMContentLoaded", ready)
1Komentarze
Hello,
Thanks for this initial proposal. The behavior works, but could be improved to better handle real-world cases encountered in production.
In particular, the address1 field is often incorrectly filled out by users unfamiliar with web forms, leading to incomplete addresses (e.g., missing street number). Instead of blocking the confirm-addresses button in a binary way, I opted for a progressive approach: a conditional warning message via native JavaScript.
⚙️ Logic:
On keyup in the address1 field, we check for the presence of at least one digit (\\d).
If no digit is detected, a warning block (already injected below the field) becomes visible.
The alert is purely informative (no blocking), so as not to penalize valid addresses without numbers (which happen in rural areas or overseas territories).
✅ Benefits:
Non-intrusive UX.
Compatible with custom themes.
Easily extendable to other fields (first name, last name) or rules (e.g., only one initial capital letter).
Thanks again for sharing this. ?