Testing Tip – Check If Validation Messages Push Your Form Around

Testing Tool Updates – April 2018
April 21, 2018
CloudApp - screen recording tool
Cloudapp Launches Chrome Extension
October 3, 2018
Show all

Testing Tip – Check If Validation Messages Push Your Form Around

Testing Form Validation Messages

When testing forms, check to see if the layout of the form changes when validation messages are displayed.

When a validation message displays, either for a required field that has no input or a field that has invalid input, the introduction of the validation message can push other elements on the form down, which can then lead to other problems.

For example, a website we tested recently had a newsletter signup form that displayed in an overlay. When the validation messages displayed, the close button for the overlay was pushed down and became inaccessible. This meant the user could no longer close the overlay and rendered the website no longer usable unless the user either completed the form or refreshed the page.

If your website is available in multiple languages then check the form in each language. The above problem was only an issue for the German language version of the site, as an increased amount of text on the form overlay meant there was less space overall.

Finally, validation messages can simply push your other form elements around, making the form look less pleasing to the eye. If a validation message is displayed, it shouldn’t have an impact on the form layout.

Photo by rawpixel on Unsplash

Tom Batey
Tom Batey
Tom Batey, founder of Testing Web Sites & WebDepend, is a hands on website tester focusing on quality across web and mobile.