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.