this post was submitted on 10 Jun 2026
55 points (100.0% liked)

Web Development

5675 readers
86 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Related Communities

Wormhole

Some webdev blogsNot sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

CreditsIcon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 3 years ago
MODERATORS
you are viewing a single comment's thread
view the rest of the comments
[โ€“] rekabis@lemmy.ca 2 points 5 hours ago (1 children)

Ahead of any validation for forms should be input masks at every reasonable step.

Make sure that only numbers can be entered into a phone field, and with the correct pattern. Ensure that postal codes can only have numbers and letters, and the letters come in uppercase even if the user presses a lowercase letter. Have a date picker available, sure, but give people the option of just typing it out, and also make it clear that the format will be ISO-8601.

Well thought out input masks provide proactive correction and can massively help avoid reactive validation that only comes up after the user leaves the field or submits the form.

[โ€“] JakenVeina@midwest.social 3 points 3 hours ago

I actually heavily disagree. One of the WORST things you can do for user experience is defy their expectations for input. E.G...

  • Users expect to have characters appear, where the cursor is, when they press character keys
  • Users expect to have the character in front of the cursor be removed, when they press [Delete]
  • Users expect to have the character behind the cursor be removed, when they press [Backspace]
  • Users expect to have some kind of submission action take place, when they press [Enter]
  • Users expect to be able to click on things that look clickable
  • Users expect to not have elements on the page move underneath their fingers (I.E. as they type or click things)
  • Users expect the contents of their clipboard to be pasted at the cursor position, when they perform a Paste

Breaking these rules by masking certain inputs generally makes them feel HORRIBLE to use.

Banks, for example, love to do this. I hit [1], [0], and [0] on the balance transfer form, to transfer $100, and I end up with a transfer for $1.00, because the validation forces a decimal point to be injected.

I think there are niche cases where keystroke rejection can make sense, but it's basically never worth the effort. And phone numbers is NOT one of them. When I buy stuff online, and get asked for a phone number, I'm virtually always pasting it in, because the only number I give out on the internet is a throwaway, and I don't have it memorized. More often than not, it gets rejected, because it was copied as "(XXX) XXX-XXXX", and the form doesn't like the formatting, even when that formatting is auto-applied anyway, as you type.

Good form validation involves letting users enter whatever the hell they want (within a max length restriction), and giving good feedback when it's not acceptable, indicating what needs to be corrected. Also, auto-completion goes a long way, when possible.