Do you trim starting and trailing whitespaces in input fields?
Mobile keyboards, autocomplete, and even copy-paste behavior often introduce leading or trailing whitespace into input fields. This causes validation to fail, even when the actual content is correct—like a GitHub URL ending in a space. That’s a frustrating experience for users, and it’s easily avoidable.
When input validation fails because of a whitespace character the user can’t see, it feels like the form is broken. Trimming whitespace is a simple fix that drastically improves UX.
Always trim inputs before validating
For nearly all form fields (email addresses, URLs, usernames, etc.) it is best practice to automatically remove any leading and trailing whitespace before performing validation or submitting data.
Code trims the input to remove whitespace:
const trimmedValue = input.trim();
Input validation passes: “github.com/0xharkirat” is accepted
Figure: Good example – Automatically trimming input before validation makes the form behave as expected
Exceptions and notes
There are rare cases (e.g. password fields or intentionally space-padded inputs) where trimming might be inappropriate. In such cases, make this behavior explicit in the UI, or better yet, avoid such patterns altogether.
For most user inputs, trimming is safe, helpful, and expected.
How to implement
Most platforms and frameworks make this easy:
- JavaScript/TypeScript:
value.trim()
- C#:
input.Trim()
- Python:
input.strip()
- SQL:
TRIM(column)
- HTML Input Events: Consider trimming on
onBlur
oronChange
before submitting the form.
This small usability improvement makes a big difference - users don’t notice when it works, but they definitely notice when it doesn’t work.