Automatic and real-time validation of each Text field

Asked

Viewed 365 times

0

I want every TextFormField is validated individually and in real time as the user type, I got this behavior using TextEditingController and updating the errorText of each TextFormField as validated the text of controller.
However, to do so seems to me 'gambiarra', since each TextFormField has its parameter validator and there’s Form with the autovalidateMode - now that the autovalidade was discontinued.
Trying to use what I mentioned above I don’t get the desired behavior, the closest I get is using

autovalidateMode: AutovalidateMode.onUserInteraction

and get as a result all fields updated at once with the validation message after user interaction with any field.

The 1° form I have made is already correct or is it possible the behavior I desire with the 2°?

flutter dart

1 answer

1

You did not provide an example, but this problem occurs because the initial text of each TextFormField (probably an empty string) already makes the validation return as false. So, in an initial state, all the TextFormField may be considered as non-validated.

[...] since each Textformfield has its Validator parameter and there is the Form with the autovalidateMode [...]

Not only the Form owns the property autovalidadeMode. Each Textformfield individually can also have this property configured.

Try removing this Press from Form and place directly in each Textformfield:

TextFormField(
                        autovalidateMode: AutovalidateMode.onUserInteraction,
                        validator: (String value) {
                               return value.contains('') ? 'Validação do erro' : null;
                        },
              )

The following example, freely adapted from the above documentation page, demonstrates the desired result (can be tested on Dartpad):

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Examplo TextFormField',
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Form(
          child: Wrap(
            children: List<Widget>.generate(5, (int index) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: ConstrainedBox(
                  constraints: BoxConstraints.tight(const Size(200, 50)),
                  child: TextFormField(
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    validator: (String value) {
                      return value.contains('')
                          ? 'Validação que retorna falsa no valor inicial.'
                          : null;
                    },
                  ),
                ),
              );
            }),
          ),
        ),
      ),
    );
  }
}

Browser other questions tagged flutter dart

You are not signed in. Login or sign up in order to post.