# Form validation

> Form validation checks what people enter and says what is wrong near the field, as soon as the value is entered. Apple asks to validate dynamically so mistakes are not found after a long form.

Page: https://www.appetiteui.com/glossary/form-validation. Form validation on mobile: inline errors and secure fields. Also called Inline validation, Error message, Input error.

## Why it matters

People get frustrated when they must go back and correct mistakes after filling a long form, and a message at the top of the screen does not say which field it means.

The cheapest field is the one not asked: Apple asks to gather what the system knows and to offer choices instead of typing.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Entering data: text field with dynamic validation | Text field error state | Input error state |
| Password entry | Secure field, never prepopulated | Not drawn in the file | See below |
| Error state in the file | Rule, hint and icon turn red | Same field | See below |

## In Appetite UI

Input has five states, Placeholder, Filled, Focused, Error and Disabled. Only the rule, the text and the icons move, so a form does not jump on error, and the hint carries the message. The docs say red is not a message: say what went wrong in the hint.

## Example

An email field checks the format when the person leaves it and shows a line under it reading Enter an address like name@company.com.

## Common mistakes

- Validating only on submit.
- An error that does not say how to fix it.
- Marking the error by color alone. Add text or an icon.
- Clearing the field when it is wrong.

## Questions

### When should a form validate?

As soon as the value is entered or the person leaves the field. Apple advises verifying values as they are entered and giving feedback.

### Should a password field be prefilled?

Never. Apple says to ask people to enter a password or use biometric or keychain authentication.

## Sources

1. [Apple Human Interface Guidelines: Entering data](https://developer.apple.com/design/human-interface-guidelines/entering-data)

## Related

- Docs: [Input](https://www.appetiteui.com/docs/input)
- Docs: [Onboarding app screens](https://www.appetiteui.com/docs/screens-onboarding)
- Glossary: [Text field](https://www.appetiteui.com/glossary/text-field)
- Glossary: [Focus ring](https://www.appetiteui.com/glossary/focus-ring)
- Glossary: [Dropdown menu](https://www.appetiteui.com/glossary/dropdown-menu)