Should I make space for error messages in forms?

Question

I'm designing an mobile app for both iOS and Android, which includes a form. The form has several required input fields that the user needs to complete before continuing.

If the user clicks Continue before typing in everything required, an error message would pop up under the field. All okay so far.

But, according to the iOS developers on my team, it's impossible (or at least difficult) to make something appear in the layout that pushes the rest of the content down. This is not a problem on Android apparently.

I don't know enough about developing for iOS, and I struggle to find a decent alternative for the iOS developers, so my questions are:

• Is this really a problem when developing for iOS?
• Should I make space for the error message below the input field, before it's displayed?
• Are there any other good solutions to displaying the error message, that doesn't push the content down?

Here's a screenshot to showcase my problem. I've also made an example where I have reserved space for the error message, but I don't think it looks pretty good to have so much space between the elements, when it's not gonna be consistent throughout the app.

Answer 1

I disagree with @colmcq. Giving space for error messages, that might come in like 10% of the cases is not at all a good option.

Actually, it is not Impossible or difficult to show the form validation messages as you have shown in option 2. Many apps use that method only.

Reference
- Please ask your dev team to check for an easy method in stackoverflow.com or developer.apple
- You might find some useful information here: https://www.davidbritch.com/2017/03/validating-user-input-in-xamarinforms-iv.

There is a new and intuitive form validation here: https://github.com/adamwaite/Validator

Answer 2

Showing error message below an input field is one of the most common practices. Google's Material Design also recommends the usage of this method.

In iPhone different methods are used to show these error messages. Some of them are listed below.

1. Enable the action button only when the user enters the value for all the required input fields - eg. Whatsapp

   

2. Show a toast at the top of the screen over the apps navigation bar - eg. Myntra

   

3. Show the error message as a banner at the top of the screen below the navigation bar - eg. Instagram

   

4. Displaying short error messages (mostly single line) below the input field without taking extra space ie, the message is shown in the available space below the field and hence the separation between the fields doesnot blemish the screens asthethics - eg. BookMyShow

   

Answer 3

Just take a look at the Material Design Guidelines. I understand you use a classic style, but you can apply the same solution.

Text field input Helper text may be included before, during, or after a user interacts with each field on a form.

Show error text only after user interaction with a field. If the user inputs incorrect data, helper text may transform into error text.

Minimize form text to the essentials. Not every text field needs helper and/or error text.

Specification:

Place 16dp of vertical space between text fields and below the error text.

Answer 4

I think the design with space makes sense for two reasons:

• the layout doesn't jump when error messages are displayed
• more white space makes the design look less cluttered

So go with option 3

Answer 5

on our last project we have used tooltips to show error messages. the reason was that we used long forms, and the shown error messages created emtpy spaces that devided logical components.

for an inspiration: react tooltips - https://react-tooltip.netlify.com/