Form fields in autovalidate form are validated on the second build (but not the first)

@HansMuller

If you have a TextFormField with a validator in a Form with autovalidate set to true, the validator is not evaluated when the form field is first created, but it is evaluated the next time the Form builds, even if that happens for unrelated reasons (e.g. an animation, or a reassemble during hot reload). So for example this means that hot-reloading an auto-validate form will make all the validators trigger and all the text fields turn red.

cc @HansMuller

I think we should reimplement autovalidate by having the build methods of fields check if it's set and if so validate themselves, rather than having the form do it.

@Hixie

@Hixie : I would like to take this issue. I will try to reproduce this issue and get back to you. Is there a demo app that already shows this issue ?

I think you'll be able to reproduce the problem with the gallery TextField demo, https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/text_form_field_demo.dart

Thanks for taking this on!

I wasn't able to reproduce with Gallery.
A hot-reload doesn't trigger validation, only clicking the [SUBMIT] button.

[✓] Flutter (Channel dev, v1.1.9, on Mac OS X 10.14.1 18B75, locale en-AT)

I don't close because I'm not 100% sure I understand what the issue is.

_autovalidate won't work without setState, see attached image,

line 107 https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/text_form_field_demo.dart

-      _autovalidate = true; // Start validating on every change.
+      setState(() {
+        _autovalidate = true; // Start validating on every change.
+      });

if the Form Widget is set to autovalidate the validator is exectuted at first time, I think it's a bug

@jeisux92

@jeisux92 did you found a workaround for this bug?

@Hixie

Why TextFormField is auto-validating itself without updating its content? I have autovalidate set to true, but is this expect to happen?
Note: this is causing my all my fields red without updating its content.

@Hixie is this a expected behaviour?

I have found this many times. I see it has a design-flaw/bug. Their is no way anyone would want an entire form to autovalidate and show errors as soon as it is displayed.

Yes i agree. I think autovalidate should only run when a field value changes.
I just did a workaround, using GlobalKey<FormFieldState> and I just run the validation on the onChanged property:

final GlobalKey<FormFieldState> formFieldKey = GlobalKey<FormFieldState>();

TextFormField(
  key: formFieldKey,
  validator: (value) {
    if (value.trim().length == 0) {
      return 'Value is required!';
    }
    return null;
  },
  onChanged: (value) {
    formFieldKey.currentState.validate();
  },
)

This is reproducible in 1.20.0-7.1.pre.

Complete sample code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Name'),
        ),
        body: Center(
          child: Form(
            autovalidate: true,
            child: TextFormField(
              validator: (e) => 'error/$e',
            ),
          ),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel dev, 1.20.0-7.1.pre, on Mac OS X 10.15.5 19F101, locale en-AO)
    • Flutter version 1.20.0-7.1.pre at /Users/pedro/dev/SDKs/flutter_dev
    • Framework revision 7736f3bc90 (6 days ago), 2020-07-10 16:33:05 -0700
    • Engine revision d48085141c
    • Dart version 2.9.0 (build 2.9.0-21.2.beta)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/pedro/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Users/pedro/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6514223/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Google
      Chrome.app/Contents/MacOS/google-chrome-unsafe

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] Android Studio (version 4.0)
    • Android Studio at /Users/pedro/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6514223/Android
      Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (4 available)
    • AOSP on IA Emulator (mobile) • emulator-5554 • android-x86    • Android 9 (API 28)
      (emulator)
    • macOS (desktop)              • macos         • darwin-x64     • Mac OS X 10.15.5
      19F101
    • Web Server (web)             • web-server    • web-javascript • Flutter Tools
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome
      83.0.4103.116

• No issues found!

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Form fields in autovalidate form are validated on the second build (but not the first) #15404

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Form fields in autovalidate form are validated on the second build (but not the first) #15404

Description

Activity

Hixie commented on Mar 12, 2018

meggamind commented on Apr 6, 2018

HansMuller commented on Apr 6, 2018

zoechi commented on Jan 16, 2019

li2 commented on Feb 10, 2019

jeisux92 commented on Apr 18, 2020

pedromassango commented on May 5, 2020

pedromassango commented on May 5, 2020

slightfoot commented on May 5, 2020

SaulPT commented on Jun 2, 2020

pedromassangocode commented on Jul 16, 2020

github-actions commented on Aug 15, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions