Hot answers tagged validation
123
If you feel the 'Confirm Email Address' field is required, but want to prevent people copy-and-pasting it then why not take a different approach?
When requesting the user details and email address just ask the questions once. Then, on the final sign-up / payment screen (depending on your application) add a field on this last page stating:
"We will send ...
73
I would avoid this behaviour as it's breaking people's basic expectations of being able to copy/paste.
October 2011 - an article by blogger, speaker and serial entrepreneur Boris Veldhuijzen van Zanten on The Next Web (which he founded) - 10 ways to screw up a web form and piss me off
Number 1 - that's number ONE: Don’t ask people to re-type email ...
48
The moment a date is ambiguous you should not convert it to what you think it is.
For example, in most of the world date formats are DDMMYYYY or YYYYMMDD, but in the US for some (silly) reason the US uses MMDDYYYY. You know that this is likely to be a confusion, so don't convert a date that is ambiguous.
If the date is critical, consider using a date ...
45
Lying to your users is a bad practice.
Besides, I’m not clear how this is supposed to work. If users see that the address is “required” but don’t feel like giving their address, they’re simply going to abandon the form, and not submit it anyway. If users figure out that “required” doesn’t necessarily mean Required, then you’re just confusing users when ...
30
I use the rule server-side validation for security and client side validation for usability.
I can't trust any client, but I can write a standard client which quickly (without the network) validates inputs, so the user can get a response sometimes even while typing.
This also minimizes the wrong requests my client sends to my server.
-- EDIT --
What I ...
25
I’d recommend not including a ‘confirm email’. I agree that many people copy and paste rather than re-typing the email address from the original ‘email address’ field (defeating the purpose of the confirmation field).
Some related research/findings/best-practices:
1) Smashing Magazine’s article'Web Form Validation: Best Practices and Tutorials' reference ...
24
The icon is an extra visual cue.
This might be useful in places where the page is viewed on low contrast device or if the user has some sort of colour blindness to draw attention to the message that might otherwise blend in with the rest of the information on the page.
If your design makes it clear enough with the addition of just the text then you might ...
24
Encapsulated flags are the only solution I've found that reach all edge cases. Pointing the flag at the label rather than the input allows for consistency with radio buttons and check mark groups or weird inputs like sliders or sorters.
Highlighting the field with red is also helpful, but not always possible. Example usages below.
download bmml ...
22
This is annoying. Your user fills out the form, submits, and gets back "3 mistakes". He corrects those 3 mistakes, submits, and gets back "2 new mistakes" in fields he hasn't changed meanwhile. His reaction:
"Why did you not tell me about those 2 mistakes in the first place"?
And he's right.
Clientside validation was meant to help the user by providing ...
20
Since the email field is unmasked, the confirmation seems redundant to users.
If the user is advanced enough to copy and paste instead of retyping, the user probably knows his/her address. Preventing copy and paste would just annoy users.
When the user copies the email, the user has to look at what he wrote and thus would probably notice a mistake, ...
18
I don't think users who don't want to answer questions will test your page to see if they are really required, they'll likely just abandon the form.
Perhaps you should ask why the user would be reluctant to answer those questions.
Think about it as a conversation: if a stranger came up to you and started by asking unnecessarily personal questions then ...
17
Good answers above. Just one more tip, though:
Consider having your application parse and re-write the date the moment the field loses focus. If the user types 091011, transform it into "9 October 2011" (or "10 September 2011" for US users) - your user will instantly see if his entry has been misinterpreted.
17
The error message should appear before the form field itself (at a minimum in the markup itself, but ideally visually shown this way on the screen too) so that when someone is reading the form they read that the field has errored before they then read the field in question - that way the user is prepared mentally that "the contents of this field I am about ...
14
The first message should be given as a warning, not an error. In certain cases you may want to accept something that is probably wrong, but just very possibly not so. For example custom protocol prefixes for urls (like chrome://), internal phone numbers (that don't have 10 digits), e-mail addresses that have explored the full depths of the specs (including ...
14
Auto-correction shouldn't occur. It takes control away from the user, is often wrong, and is even worse if it's changing the content of the message silently.
You cite localization as one of the area in which it behaves badly. It's also the case with old or dead languages, citations, programming languages, medicine or very technical terms... Actually there ...
13
Ideally you'd let them type in the phone number in any format and you'd have client and server side logic that could parse it out.
Barring that--if you're just looking for a quick fix--look at using field masking. If you're using jQuery, this is a decent one:
http://digitalbush.com/projects/masked-input-plugin/#demo
13
I would recommend a No Limit for the text field upon composing but a suitable limit upon listing.
What I mean is that if the user is limited to expressing their opinion in a regulated fashion the true nature of their opinion could be altered. They may need 752 characters to express their opinion but you've set the limit to 500 characters, what should they ...
13
I'm a huge fan of on-the-fly server validations.
When you're not dealing with huge amounts of data (large file uploads, etc), it's not too difficult to automatically AJAX-submit parts of a form to the server for validation. This is commonly seen in sign-up forms where users need to pick a unique username in addition to entering their email, password, etc.
...
12
If the button is merely disabled, users will
Think the application is broken,
Not immediately realize which fields are unfilled and
Not realize the fields are unfilled until the very end, which is annoying
So, I'd suggest telling your colleagues exactly what you told us, which is that
allowing them to submit then find errors might be more efficient ...
11
Displaying an error message
Ideally you want a combination of your #1 and #2 suggestions:
Please select a date that doesn't fall on a weekend or a holiday and is at least 3 business days from now.
The reason this is the best option is because this is what you would say to a person if they were standing next to you. A good rule of thumb for error copy, or ...
11
If you really care about UX, so you have to validate URL automatically.
So if user types "example.com" you have to change it to "http://example.com".
If you want to add ability to navigate to url, that is just typed, so just underline it and make it blue; user will understand, that this is a link.
download bmml source – Wireframes created with ...
11
Date validation has always been a problem due to American MM/DD/YYYY vs small Endian DD/MM/YYYY vs ISO YYYY-MM-DD, I can't imagine asking or allowing users to enter raw numbers with no separators and hoping it works well. In my subjective experience I must also say I have no idea who on earth would enter a date in this format unless it was a date field such ...
11
The usual caveat of "it depends" applies -- if the users are typing in dates which they are reading off from somewhere else, and that reference material is formatted as MMDDYY or MMDDYYYY then, yes, let them simply transcribe it.
Also, if the users are data entry process workers (eg. in a call centre) and not casual website visitors, then let them perform ...
11
The problem is that the date is never ambiguous to the user - they always know what they mean.
User enters 091011
System displays 09/10/11
User assumes the computer understood correctly.
Simply accepting 091011 and leaving it that way doesn't resolve this because the user doesn't get to see if you have a difference of interpretation.
Key Principle
...
11
When no text, make the message simply inicate the max number of characters (no mention of the number remaining.
As you type, the number of remaining characters fades from grey to black (very subtle indication)
When you reach the limit, change the border to red; make any excess text a different colour; show a small error icon below and indicate number of ...
11
It seems you're already marking optional form fields instad of required ones. There seem to be no 'required' indicators, but no 'optional'-indicators, too, so I wanted to mention that.
What I like to do on forms is to "micro-gamify" them: For every field in the form provide a "validation-indicator". For simplicity, let's say it's just a small circle. This ...
11
Client side validation is usually desirable because it is fast. The validation gets done before the form is submitted. The user doesn't have to wait several seconds before the server responds.
Server side validation is usually required because users without javascript or malicious users could submit bad data without it.
Best practice is usually to have ...
10
i'll add some technical stuff:
name the field "email" -> browsers recognize the field and provide you with your email addresses you complete in those fields
put the type of the field "email". some devices (like iphone) use a different keyboard when dealing with this type of inputs, i read a very good article on this but i can't find it.
10
The best way here is to remove all read-only fields from the form. You have to find some other way to show this info. But if there is no way to remove them, so make sure that they don't look like input field.
For fields with default value you just have to put some value in them; with black input font color. (grey color will confuse them, because a lot of ...
10
A List Apart actually has a great article: Inline Validation in Web Forms where the best performing inline validation method actually always displayed icons after validation; a green circle with a check for success, and a red circle with an exclamation point for an error, plus red text for errors.
This method allows the icon to give immediate feedback for ...
Only top voted, non community-wiki answers of a minimum length are eligible
