Form validation rules in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when submitting a Flutter form with an empty required field?

Consider a Flutter form with a TextFormField that has a validator checking if the field is empty. What will the user see if they submit the form without entering any text?

Flutter

TextFormField(
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
),

A The keyboard closes but no error message is shown.

B The form submits successfully without any message.

C The app crashes with a null pointer exception.

D An error message 'Please enter some text' appears below the field, and the form does not submit.

💡 Hint

Think about what the validator function returns when the field is empty.

The validator returns a string error message when the field is empty, which Flutter shows below the field and prevents form submission.

📝 Syntax

intermediate

Which validator code correctly checks if input is a valid email?

You want to validate that a TextFormField input is a valid email using a simple regex. Which validator code snippet is correct?

A validator: (value) { if (value == null || !RegExp(r"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$").hasMatch(value)) return 'Invalid email'; else return null; },

B validator: (value) { if (value == null) return null; if (!RegExp(r"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$").hasMatch(value)) return 'Invalid email'; },

C validator: (value) => value != null && RegExp(r"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$").hasMatch(value) ? 'Invalid email' : null,

D validator: (value) => RegExp(r"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$").hasMatch(value ?? '') ? null : 'Invalid email',

💡 Hint

The validator must return null if valid, error string if invalid.

Option A returns 'Invalid email' if the value is null or does not match regex, else returns null, which is correct.

❓ lifecycle

advanced

When is the validator function called in Flutter forms?

In Flutter, when does the validator function of a TextFormField get called during form usage?

A Only when the form's validate() method is called.

B Only when the field loses focus.

C Every time the user types a character in the field.

D When the form is built and never again.

💡 Hint

Think about how Flutter triggers validation explicitly.

Flutter calls validator functions when FormState.validate() is called, usually on form submission.

🔧 Debug

advanced

Why does this Flutter form validator always show an error even with valid input?

Look at this validator code: validator: (value) { if (value!.isEmpty) { return 'Required'; } if (!value.contains('@')) { return 'Invalid email'; } return null; } Why might this cause a runtime error?

Flutter

validator: (value) {
  if (value!.isEmpty) {
    return 'Required';
  }
  if (!value.contains('@')) {
    return 'Invalid email';
  }
  return null;
}

A Because contains('@') is not a valid method on String.

B Because value can be null, using value! causes a crash if null is passed.

C Because the validator must return a boolean, not a string.

D Because the validator function is missing a return statement.

💡 Hint

Consider what happens if the field is empty and value is null.

Using value! assumes value is never null, but Flutter may pass null, causing a runtime error.

🧠 Conceptual

expert

What is the best way to validate multiple fields with dependencies in Flutter forms?

You have two fields: password and confirm password. You want to validate that confirm password matches password. Which approach correctly handles this in Flutter form validation?

A Validate only password field and ignore confirm password field validation.

B Use separate validators on each field without cross-checking values.

C Use a validator on confirm password that accesses the password field's controller text to compare values.

D Use a global variable to store password and compare in confirm password validator.

💡 Hint

Think about how to access another field's value inside a validator.

Using the password field's controller text inside confirm password's validator allows direct comparison for matching.

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