Skip to content

[Form] AutovalidateMode.onUserInteraction validates Textfields without interaction #107350

Open
#182752
Open
[Form] AutovalidateMode.onUserInteraction validates Textfields without interaction#107350
#182752
Labels
P3Issues that are less important to the Flutter projecta: text inputEntering text in a text field or keyboard related problemsfound in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1has partial patchThere is a PR awaiting someone to take it across the finish linehas reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagespackageflutter/packages repository. See also p: labels.team-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@newtaDev
newtaDev
opened on Jul 9, 2022

Steps to Reproduce

Execute flutter run on the code sample

Expected results:

Screen.Recording.2022-07-09.at.9.42.26.PM.mov

Actual results:

Screen.Recording.2022-07-09.at.9.38.12.PM.mov
Code sample 
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              const Text('has issue onUserInteraction (wraped with Form)'),
              Form(
                key: _formKey,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                child: Column(
                  children: [
                    TextFormField(
                      decoration: const InputDecoration(
                        hintText: 'Enter your Name',
                      ),
                      validator: (val) {
                        return val!.length < 4 ? 'Not valid' : null;
                      },
                    ),
                    const SizedBox(height: 20),
                    TextFormField(
                      decoration: const InputDecoration(
                        hintText: 'Enter your email Id',
                      ),
                      validator: (val) {
                        return val!.length < 4 ? 'email not valid' : null;
                      },
                    ),
                    const SizedBox(height: 20),
                    TextFormField(
                      decoration: const InputDecoration(
                        hintText: 'Enter your password',
                      ),
                      obscureText: true,
                      validator: (val) {
                        return val!.length < 4 ? 'password not valid' : null;
                      },
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 40),
              const Text('Working fine onUserInteraction (wraped without Form)'),
              TextFormField(
                decoration: const InputDecoration(
                  hintText: 'Enter your Name',
                ),
                autovalidateMode: AutovalidateMode.onUserInteraction,
                validator: (val) {
                  return val!.length < 4 ? 'Not valid' : null;
                },
              ),
              const SizedBox(height: 20),
              TextFormField(
                decoration: const InputDecoration(
                  hintText: 'Enter your email Id',
                ),
                autovalidateMode: AutovalidateMode.onUserInteraction,
                validator: (val) {
                  return val!.length < 4 ? 'email not valid' : null;
                },
              ),
              const SizedBox(height: 20),
              TextFormField(
                decoration: const InputDecoration(
                  hintText: 'Enter your password',
                ),
                autovalidateMode: AutovalidateMode.onUserInteraction,
                obscureText: true,
                validator: (val) {
                  return val!.length < 4 ? 'password not valid' : null;
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Logs 
[✓] Flutter (Channel stable, 3.0.2, on macOS
    12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.0.2 at
      /Users/newton/Development/flutter
    • Upstream repository
      https://github.com/flutter/flutter.git
    • Framework revision cd41fdd495 (4 weeks
      ago), 2022-06-08 09:52:13 -0700
    • Engine revision f15f824b57
    • Dart version 2.17.3
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android
    devices (Android SDK version 32.0.0-rc1)
    • Android SDK at
      /Users/newton/Library/Android/sdk
    • Platform android-32, build-tools
      32.0.0-rc1
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bi
      n/java
    • Java version OpenJDK Runtime Environment
      (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode
    13.4.1)
    • Xcode at
      /Applications/Xcode.app/Contents/Develop
      er
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google
      Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android
      Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨
      https://plugins.jetbrains.com/plugin/921
      2-flutter
    • Dart plugin can be installed from:
      🔨
      https://plugins.jetbrains.com/plugin/635
      1-dart
    • Java version OpenJDK Runtime Environment
      (build 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.68.1)
    • VS Code at /Applications/Visual Studio
      Code.app/Contents
    • Flutter extension version 3.42.0

[✓] Connected device (3 available)
    • sdk gphone64 arm64 (mobile) •
      emulator-5554 • android-arm64  • Android
      12 (API 31) (emulator)
    • macOS (desktop)             • macos
      • darwin-arm64   • macOS 12.4 21F79
      darwin-arm
    • Chrome (web)                • chrome
      • web-javascript • Google Chrome
      103.0.5060.53

[✓] HTTP Host Availability
    • All required HTTP hosts are available

Activity

  1. Tonouewa-kefil commented on Jul 10, 2022

    @Tonouewa-kefil
    Tonouewa-kefil
    on Jul 10, 2022

    So what is happening is, that you are auto validating the whole form instead of each Text form field.

    code sample 
    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  final one = TextEditingController();
  final two = TextEditingController();
  final three = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
            padding: const EdgeInsets.all(20),
            child: Column(children: [
              const Text('has issue onUserInteraction (wraped with Form)'),
              Form(
                key: _formKey,
                child: Column(
                  children: [
                    TextFormField(
                      autovalidateMode: AutovalidateMode.onUserInteraction,
                      controller: one,
                      decoration: const InputDecoration(
                        hintText: 'Enter your Name',
                      ),
                      validator: (val) {
                        return val!.length < 4 ? 'Not valid' : null;
                      },
                    ),
                    const SizedBox(height: 20),
                    TextFormField(
                      autovalidateMode: AutovalidateMode.onUserInteraction,
                      controller: two,
                      decoration: const InputDecoration(
                        hintText: 'Enter your email Id',
                      ),
                      validator: (val) {
                        return val!.length < 4 ? 'email not valid' : null;
                      },
                    ),
                    const SizedBox(height: 20),
                    TextFormField(
                      autovalidateMode: AutovalidateMode.onUserInteraction,
                      controller: three,
                      decoration: const InputDecoration(
                        hintText: 'Enter your password',
                      ),
                      obscureText: true,
                      validator: (val) {
                        return val!.length < 4 ? 'password not valid' : null;
                      },
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 40),
            ])),
      ),
    );
  }
}

  2. newtaDev commented on Jul 10, 2022

    @newtaDev
    newtaDev
    on Jul 10, 2022
    ContributorAuthor

    @Tonouewa-kefil

    So what is happening is, that you are auto validating the whole form instead of each Text form field.

    I'm asking why both ways behave differently? (autovalidateMode: AutovalidateMode.onUserInteraction on Form widget and on each TextFormField)
    Both should work the same right..?

  3. Tonouewa-kefil commented on Jul 11, 2022

    @Tonouewa-kefil
    Tonouewa-kefil
    on Jul 11, 2022

    @newtaDev

    No, they won't work the same because, on one hand, you are auto validating the form which means any change that occurs in the form will trigger all the potential errors to appear, and on the other hand you are auto validating each TextForm Field which is what you most likely want to do.

  4. maheshj01
    added
    in triagePresently being triaged by the triage team
    on Jul 11, 2022

  5. maheshj01 commented on Jul 11, 2022

    @maheshj01
    maheshj01
    on Jul 11, 2022
    Member

    Hi @newtaDev, Thanks for filing the issue. I am able to reproduce the issue, validation is run on all the fields even if they are not interacted. As per the docs

    onUserInteraction → const AutovalidateMode
    Used to auto-validate Form and FormField only after each user interaction.

    flutter doctor -v (mac) 
    [✓] Flutter (Channel stable, 3.0.4, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.0.4 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 85684f9300 (4 days ago), 2022-06-30 13:22:47 -0700
    • Engine revision 6ba2af10bb
    • Dart version 2.17.5
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.67.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.44.0

[✓] Connected device (3 available)
    • sdk gphone arm64 (mobile) • emulator-5554 • android-arm64  • Android 11 (API 30) (emulator)
    • macOS (desktop)           • macos         • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)              • chrome        • web-javascript • Google Chrome 103.0.5060.53

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

    [✓] Flutter (Channel master, 3.1.0-0.0.pre.1494, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.1.0-0.0.pre.1494 on channel master at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 829bddf616 (3 hours ago), 2022-07-04 03:49:08 -0400
    • Engine revision e78ed7f1c9
    • Dart version 2.18.0 (build 2.18.0-251.0.dev)
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.67.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.44.0

[✓] Connected device (3 available)
    • sdk gphone arm64 (mobile) • emulator-5554 • android-arm64  • Android 11 (API 30) (emulator)
    • macOS (desktop)           • macos         • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)              • chrome        • web-javascript • Google Chrome 103.0.5060.53

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
  6. maheshj01
    added
    a: text inputEntering text in a text field or keyboard related problems
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    found in release: 3.0Found to occur in 3.0
    found in release: 3.1Found to occur in 3.1
    and removed
    in triagePresently being triaged by the triage team
    on Jul 11, 2022
  7. maheshj01
    changed the title [-]Weird behavior in `TextFormField` when `TextFormField` wrapped inside `Form` widget with `autovalidateMode` set to `AutovalidateMode.onUserInteraction`[/-] [+][Form] `AutovalidateMode.onUserInteraction` validates all textfield without interaction[/+] on Jul 11, 2022
  8. maheshj01
    changed the title [-][Form] `AutovalidateMode.onUserInteraction` validates all textfield without interaction[/-] [+][Form] `AutovalidateMode.onUserInteraction` validates all Textfields without interaction[/+] on Jul 11, 2022
  9. pedromassango
    self-assigned this
    on Jul 13, 2022

  10. 15 remaining items

  11. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-designOwned by Design Languages team
    triaged-designTriaged by Design Languages team
    and removed
    triaged-designTriaged by Design Languages team
    on Jul 8, 2023

  12. flutter-triage-bot commented on Jul 8, 2023

    @flutter-triage-bot
    flutter-triage-botbot
    on Jul 8, 2023

    This issue is assigned but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

  13. pedromassango
    removed their assignment
    on Jul 22, 2023

  14. pedromassango commented on Jul 22, 2023

    @pedromassango
    pedromassango
    on Jul 22, 2023
    Member

    Removing my assignment for now

  15. justinmc
    added
    triaged-designTriaged by Design Languages team
    P3Issues that are less important to the Flutter project
    on Aug 3, 2023
  16. Hixie
    added
    has partial patchThere is a PR awaiting someone to take it across the finish line
    on Aug 29, 2023

  17. Hixie commented on Aug 29, 2023

    @Hixie
    Hixie
    on Aug 29, 2023
    Contributor

    A partial patch for this PR exists in #120730.

  18. Hixie
    removed
    multiteam-retriage-candidate
    on Mar 6, 2024

  19. Mairramer commented on Jan 13, 2026

    @Mairramer
    Mairramer
    on Jan 13, 2026
    Contributor

    If PR #180822 gets merged, I will submit a follow-up fix, since my correction depends on it.

  20. Piinks
    added
    packageflutter/packages repository. See also p: labels.
    and removed
    frameworkflutter/packages/flutter repository. See also f: labels.
    on Aug 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projecta: text inputEntering text in a text field or keyboard related problemsfound in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1has partial patchThere is a PR awaiting someone to take it across the finish linehas reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagespackageflutter/packages repository. See also p: labels.team-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions