Form validation rules in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of form validation in Flutter?

Form validation ensures that user input meets certain rules before the app processes it. It helps prevent errors and improves user experience by giving immediate feedback.

beginner

Which Flutter widget helps manage form validation?

The Form widget groups input fields and works with a GlobalKey<FormState> to validate and save the form.

beginner

How do you define a validation rule for a TextFormField in Flutter?

Use the validator property of TextFormField. It takes a function that returns an error message string if input is invalid or null if valid.

intermediate

What does _formKey.currentState!.validate() do?

It runs all validators in the form. If every validator returns null (no errors), it returns true. Otherwise, it returns false, indicating invalid input.

beginner

Why is it important to provide user-friendly error messages in form validation?

Clear error messages help users understand what is wrong and how to fix it, making the app easier and more pleasant to use.

Which widget is used to group form fields for validation in Flutter?

A Scaffold

B Container

C Form

D Column

The Form widget groups input fields and manages validation.

What should the validator function return if the input is valid?

A false

B An error message string

C true

D null

The validator returns null when the input passes validation.

How do you trigger validation for all fields inside a Form?

A Use _formKey.currentState!.validate()

B Call setState()

C Call dispose()

D Use Navigator.push()

Calling validate() on the form state runs all validators.

Which property of TextFormField is used to add validation logic?

A controller

B validator

C decoration

D onChanged

The validator property holds the validation function.

Why should validation error messages be clear and simple?

A To help users fix input mistakes easily

B To make the app slower

C To confuse users

D To increase app size

Clear messages guide users to correct their input quickly.

Explain how to implement form validation in Flutter using Form and TextFormField.

Think about grouping fields and checking their input with a key.

Describe why form validation improves user experience in mobile apps.

Imagine filling a form and getting instant help.

Practice

1. What does the validator property in a TextFormField do in Flutter?

easy

A. It clears the input field when pressed.

B. It styles the text inside the field.

C. It saves the input value to a database.

D. It checks the user input and returns an error message if invalid.

Solution

1. Step 1: Understand the role of validator

   The validator property is used to check if the input meets certain rules.

2. Step 2: What validator returns

   If the input is invalid, it returns a string error message; if valid, it returns null.

3. Final Answer:

   It checks the user input and returns an error message if invalid. -> Option D

4. Quick Check:

   Checks user input and returns error if invalid = D [OK]

Hint: Validator returns error string if input invalid, else null [OK]

Common Mistakes:

• Thinking validator styles the field
• Assuming validator saves data
• Confusing validator with input clearing

2. Which of the following is the correct syntax to add a validator that checks if input is empty in a TextFormField?

easy

A. validator: (value) => value.length == 0 ? 'Enter text' : null,

B. validator: (value) => value.isEmpty ? 'Enter text' : null,

C. validator: (value) { if (value == null || value.isEmpty) return 'Enter text'; else return null; },

D. validator: (value) => if(value.isEmpty) 'Enter text';

Solution

1. Step 1: Check syntax for validator function

   The validator must be a function returning a string or null. validator: (value) { if (value == null || value.isEmpty) return 'Enter text'; else return null; }, uses a proper function with if-else, null check, and returns correctly.

2. Step 2: Identify syntax errors in other options

   B uses shorthand but lacks null check before value.isEmpty which throws if null. C uses length but lacks null check before accessing value.length which throws if null. D has invalid syntax with if without ternary or braces.

3. Final Answer:

   validator: (value) { if (value == null || value.isEmpty) return 'Enter text'; else return null; }, -> Option C

4. Quick Check:

   Full function with null check and proper returns = A [OK]

Hint: Use full function with return for validator to avoid syntax errors [OK]

Common Mistakes:

• Missing return statements
• Incorrect if syntax inside lambda
• Not handling null safety properly

3. Given this validator code in a TextFormField:

validator: (value) {
  if (value == null || value.isEmpty) {
    return 'Please enter text';
  } else if (value.length < 5) {
    return 'Minimum 5 characters';
  }
  return null;
}

What error message will show if the user enters "abc"?

medium

A. Minimum 5 characters

B. Please enter text

C. null (no error)

D. Syntax error

Solution

1. Step 1: Check if input is null or empty

   The input "abc" is not null and not empty, so the first if condition is false.

2. Step 2: Check length condition

   "abc" length is 3, which is less than 5, so the second condition is true and returns 'Minimum 5 characters'.

3. Final Answer:

   Minimum 5 characters -> Option A

4. Quick Check:

   Length less than 5 triggers 'Minimum 5 characters' = B [OK]

Hint: Check conditions in order; first true returns error [OK]

Common Mistakes:

• Ignoring length check
• Assuming empty error for non-empty input
• Confusing return null with error string

4. Identify the error in this validator code snippet:

validator: (value) {
  if (value.isEmpty) {
    return 'Required';
  }
  return null;
}

medium

A. Missing null check for value before calling isEmpty

B. Should return true instead of null when valid

C. Validator must be async function

D. No error, code is correct

Solution

1. Step 1: Check null safety for value

   The validator function receives a nullable String? value, so calling value.isEmpty without checking for null causes a runtime error.

2. Step 2: Correct way to check null or empty

   Must check if value == null or value.isEmpty before using isEmpty alone.

3. Final Answer:

   Missing null check for value before calling isEmpty -> Option A

4. Quick Check:

   Null safety requires checking value before isEmpty = C [OK]

Hint: Always check for null before using isEmpty on input [OK]

Common Mistakes:

• Ignoring null safety
• Returning true instead of null
• Thinking validator must be async

5. You want to validate a password field with these rules: - Must not be empty - Must be at least 8 characters - Must contain at least one digit Which validator function correctly implements these rules?

hard

A. validator: (value) {
if (value.isEmpty) return 'Password required';
if (value.length < 8) return 'At least 8 chars';
if (!value.contains(RegExp(r'\d'))) return 'Must contain digit';
return null;
},

B. validator: (value) {
if (value == null || value.isEmpty) return 'Password required';
if (value.length < 8) return 'At least 8 chars';
if (!RegExp(r'\d').hasMatch(value)) return 'Must contain digit';
return null;
},

C. validator: (value) {
if (value == null) return 'Password required';
if (value.length <= 8) return 'At least 8 chars';
if (!RegExp(r'\d').hasMatch(value)) return 'Must contain digit';
return null;
},

D. validator: (value) {
if (value == null || value.isEmpty) return 'Password required';
if (value.length <= 8) return 'At least 8 chars';
if (!RegExp(r'\d').hasMatch(value)) return 'Must contain digit';
return null;
},

Solution

1. Step 1: Check null or empty condition

   validator: (value) { if (value == null || value.isEmpty) return 'Password required'; if (value.length < 8) return 'At least 8 chars'; if (!RegExp(r'\d').hasMatch(value)) return 'Must contain digit'; return null; }, correctly checks if value is null or empty and returns 'Password required'. Options B and C miss null safety or empty check properly.

2. Step 2: Check length and digit rules

   validator: (value) { if (value == null || value.isEmpty) return 'Password required'; if (value.length < 8) return 'At least 8 chars'; if (!RegExp(r'\d').hasMatch(value)) return 'Must contain digit'; return null; }, uses < 8 for length which means minimum 8 chars required. It uses RegExp to check digit presence correctly. Options C and D use <= 8 which wrongly rejects 8-char passwords.

3. Final Answer:

   validator: (value) { if (value == null || value.isEmpty) return 'Password required'; if (value.length < 8) return 'At least 8 chars'; if (!RegExp(r'\d').hasMatch(value)) return 'Must contain digit'; return null; }, -> Option B

4. Quick Check:

   Null safety + <8 length + digit regex = A [OK]

Hint: Check null, length & regex carefully; use < not <= for min length [OK]

Common Mistakes:

• Ignoring null safety
• Using <= instead of < for length
• Incorrect regex usage
• Missing empty string check