How to validate a text field on value changed?

Question

How to autovalidate a text form field when its value changes?

i tried

bool _autoValidate = false;

TextFormField(
                autovalidate: _autoValidate ,
                onChanged: (value) {
                  setState(() {
                    _autoValidate = true;
                  });
                },
                validator: (value) {
                  if (value.length < 5) {
                    return 'False';
                  } else {
                    return 'True';
                  }
                },
              ),

But not working, TextFormField still doesn't show errors on validation.

I need a way to turn on the validation on text changed.

I checked your code. It is giving me true after i enter 5 digits — Maz341
– Maz341, Commented Oct 3, 2020 at 8:56
try to stop running your app and run flutter clean in cmd/terminal — CoderUni
– CoderUni, Commented Oct 3, 2020 at 9:01
@Maz341 it's gives true but still doesn't show errors!! there no red border or the texthint of error — Abdallah El-Rashedy
– Abdallah El-Rashedy, Commented Oct 3, 2020 at 9:08
@Uni I did flutter clean and still no erros shows, even the _autoValidate var is true, the validation still not working — Abdallah El-Rashedy
– Abdallah El-Rashedy, Commented Oct 3, 2020 at 9:12

Reza Farjam · Accepted Answer · 2024-09-18 15:33:33Z

33

Flutter has now an API to validate a form field only when the content changes. You just need to use the autovalidateMode parameter and set it to AutovalidateMode.onUserInteraction.

The following text field will only validate when the user changes its content:

    class HomeScreen extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: Center(
            child: TextFormField(
              autovalidateMode: AutovalidateMode.onUserInteraction,
            ),
          ),
        );
      }
    }

See AutovalidateMode docs for more options in when to validate.

This API is now available on the latest stable channel. Let me know if it solves your problem.

edited Sep 18, 2024 at 15:33

Reza Farjam

1,2651 gold badge9 silver badges22 bronze badges

answered Oct 3, 2020 at 9:33

Pedro Massango

5,0652 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Abdallah El-Rashedy Over a year ago

it's needs import or something?

Abdallah El-Rashedy Over a year ago

The named parameter 'autovalidateMode' isn't defined. Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'autovalidateMode'.

Abdallah El-Rashedy Over a year ago

flutter --version Flutter 1.20.4 • channel stable

Pedro Massango Over a year ago

You need to upgrade to the latest stable channel, it is now 1.22.X. Just run: flutter upgrade

Abdallah El-Rashedy Over a year ago

nope, the errors is fixed now after restart the vs code many times

|

Collectives™ on Stack Overflow

How to validate a text field on value changed?

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related