How to prevent typos during signup...the easy way


The problem: Typos suck. They create a huge hassle for both you through multiple junk accounts, and your customers through frustrating failed attempts to login. Current standards are to make a customer enter their password twice (which [although rare] still fails to help), and to TRY to check an email's structure based on it's conformity to whatever loose standards you can dream up in a regex expression. These help, but don't do enough. The first is annoying to customers, and the second only checks an email's structure, not whether or not they typed gmmail.com or gmail.com.

The solutions: By simply adding an auto-complete tooltip for email addresses (to prevent typos BEFORE they happen), and unmasking the password field temporarily while it's focused during signup, you can drastically decrease the amount of typos. It's funny that these aren't more popular because they're simple, and they really do help!

Examples:

1) The unmasked password:

Create a Password:
<input type='text' required='required' id='pass' placeholder='6-50 characters' style='margin-bottom: 5px;'>
<div style='font-size: 85%; line-height: 90%'>
Shown while typing, hidden when you click away
</div>
<script type='text/javascript'>
$('#pass').focus(function(){
	$(this).attr('type', 'text');
});
$('#pass').blur(function(){
	$(this).attr('type', 'password');
});
</script>

Some may argue that this poses a security risk. I mean, what if Nosey John from two cubicles over peaks over your desk for 45 seconds memorizing everything you type?...This is not a realistic issue. During the login process...maybe, but not during the ONE time you happen to register for an account.

2. Here are two ways of suggesting email domains:
https://github.com/Kicksend/mailcheck OR (no tutorial, just check it out by clicking login and typing your email with a common extension) https://1pass4.me




Shane Stebner

Author: Shane Stebner

Shane is a successful web-developer specializing in responsive design, and the open-source LAMP stack. Over the years, he's gained in-depth experience with Stripe, Twilio, PhantomJs, Authorize.net, PayPal, Facebook, Twitter, and many other plugins/APIs.


comments powered by Disqus