Email address bug and inline form validation

This post is the part of the series on the test IO blog about real bugs that our testers have found during test cycles. In each post, we explore the details of the issue, explain its impact, and discuss what software teams can do to avoid similar problems.

Basic validation checks the form to ensure that all mandatory fields are filled in. If there are required fields, basic validation would be a check to ensure no fields are left blank. Data validation checks the form to verify that the data is entered in the correct format and value. If an email is entered without an @ sign, data validation notices this and displays an error. Data validation can also check if a username is unique, if phone numbers are formatted correctly, or if a chosen password meets certain security criteria.

For our bug of the week, we’re taking a look at a sign-up usability bug. The site in question checks if an account already exists for an email address. However, during the sign-up process, the email field is marked complete; the error only appears after clicking submit.

While testing the paid account creation on a file sharing site, one of our testers found a bug while performing usability testing on a user sign-up form. The tester was attempting to sign-up for a new account. They filled out their name, email, password, and billing information. As they completed each field, a green check mark immediately appeared in the box. This gave the tester (and a potential user) the impression that all entered information was accepted.

Once the tester clicks the submit button, a message appears, warning that the email address entered already exists in the system. The tester then proceeds to sign in with the email address and password (which they had just set), and they can login. However, the tester receives another error message advising that “something went wrong” after logging in. Even though they are logged in, they are still unable to access the site’s interface.

The bug was initially discovered on Xiaomi Tech Redmi 3, Android 6.0.1. However, it ended up being reproducible across browsers and platforms.

What we can learn from this bug is understanding the importance of inline validation in web forms. While basic validation and data validation have their own checkpoints, they don’t quite do the job. In this case the form only interacts with the server once the submit button is clicked. Any reasonable user would think that because they see the checkmark they’ve correctly entered the information. In this case, it would also indicate to them that the email address they’ve chosen is available.

Email address is a required field in the sign-up form. As soon as the user tabbed to the next field after entering the email address, an error should have appeared. However, due to basic validation and data validation a checkmark appeared.

Here are some best practices for your email address signup form field.  When setting up the fields, include inline validation. Inline validation guides the user through the form step by step simply by talking the user through the process. When each line is validated separately using inline validation they are able to immediately see their errors.

If online subscriptions are a large part of how your business generates revenue, users need to feel informed during signup. Inline form validations give users real time feedback. Which makes for an efficient and enjoyable signup process.