2

I want to allow my users to add email recipients in a text area by just writing their addresses manually or copy & paste them from somewhere - email addresses are separated via a comma or new line.

How do you validate an email address?

If it's an incorrect address, let's say, john.doe@example,com, how do you tell the user that it's incorrect?

If it's an incorrect address, let's say, john.doe@example,com, how do you tell the user that it's incorrect?

A) Show them a notification under the text area?

If you've got multiple mistakes, you can always expand the notification underneath and make it scrollable. enter image description here

B) Offer a tooltip / notification?

This is option would be very frustrating when the user has multiple mistakes. enter image description here

C) Do you offer any validation at all?

AFAIK, email validation isn't 100% accurate whatever you do - you can never have all the edge cases thought through. So, you might end up creating a nuisance if you don't validate a legitimate email.

Improve this question
3
  • It's a good question but alas, it would only get you opinionated answers. Personally, I prefer a blend of A and C. Highlight blatant format errors, repetitions, etc. with a generic error message underneath and forget about checking the existence of an email id or the site extension
    – Shreyas Tripathy
    Nov 28, 2018 at 5:37
  • You should edit your question to be more about what is good or bad, UX wise about these options, rather than which one people would choose, because that encourages opinion-based answers.
    – locationunknown
    Nov 28, 2018 at 7:22
  • Thanks for the info on this! Will edit the question ASAP.
    – Andrei Cristian
    Nov 28, 2018 at 7:49

2 Answers 2

Reset to default
3

You have made some valid points.

However, option C makes the most sense. Many organizations have a practice where bulk emails are sent, and it may inlvolve users copy pastying more than 100-200 email addresses in one go. In that case, option A is a big NO-NO. You don't want the user to individually search for the wrong addresses and sit and fix them.

Also, you're correct. Email validation cannot be 100% accurate, so all big email clients will let you enter any email address. However, I think you could combine option B and C. For example -

enter image description here

You could use colors to represent validation states. If 100% valid (if it satisfies all the pre-determined validation criterias) it can be a green pill, and if it doesn't satisfy all criterias, it can be an orange pill (to indicate that something MAY be wrong with that email address) with a question mark icon (or any icon/no icon) which can provide some useful information on mouse hover (tap on mobile). This should not, however, prevent the user from sending the email.

Improve this answer
1
  • 1
    Thanks a lot for the info! I was also thinking about exploring coloured pills and adding a help icon in case we have trouble validating that email. Completely agree that this should not prevent the user from sending the email. This should just be a visual notification that something is wrong / unsure. :)
    – Andrei Cristian
    Nov 28, 2018 at 7:49
0

Usually, you find "best practice" by looking at what everyone else is doing. So look at how your email clients behave. Gmail doesn't seem to do any validation. And here's Outlook:

enter image description here

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.