焦点更改时的 TextFormField 验证

Question

I am using a form and some TextFormFields. I can validate the user input as below:

final _form = GlobalKey<FormState>();

void saveForm(){

_form.currentState.validate()

}

//saveForm runs when a save button is pressed.

I want to know whether it's possible to run validate function for a TextField when it loses its focus or not.(I don't want to validate the input by clicking a button and instead, I want to run validate function when user changes the TextField.)

Answer 1

I think you just want to add autovalidate: true, in your form so when your focus is change validation is call

 Form(
         key: _formKey,
         autovalidate: true,
         child:/*...*/
    )

Create your form like

  var _formKey = GlobalKey<FormState>();
  bool _autoValidate = false;

  @override
  Widget build(BuildContext context) {
    return Form(
          key: _formKey,
          autovalidate: _autoValidate,
          child: /* ... */
        ),
      ),
    );
  }

when you click on save

void _onSignUpClicked(BuildContext context) {
    if (_formKey.currentState.validate()) {
      Scaffold.of(context).showSnackBar(SnackBar(content: Text("Successfully sign up")));
    } else {
      setState(() {
        _autoValidate = true;
      });
    }
  }

Answer 2

Put TextEditingController to TextField and use addListener for getting every change. And do validate process inside that listener.

Answer 3

To notice, the accepted solution now is deprecated after 1.19
Now, new parameters has been introduced AutovalidateMode with three essential constants:

1. always: Used to auto-validate Form and FormField even without user interaction.
2. disabled: No auto validation will occur.
3. onUserInteraction: Used to auto-validate Form and FormField only after each user interaction.

Answer 4

Add autoValidateMode to your form

autovalidateMode: AutovalidateMode.onUserInteraction,

child: Form(
      key: _formKey,
      autovalidateMode: AutovalidateMode.onUserInteraction,
      child: Column()
)

Auto validate has two more modes disabled (never auto validate) and always (in all cases even without any user interaction).

Read more over here

• https://api.flutter.dev/flutter/widgets/AutovalidateMode-class.html
• https://api.flutter.dev/flutter/widgets/FormField/autovalidateMode.html