Validate textField when I focus on another textField

Question

I need help with this feature. When I enter a text in a textField, I need you to validate that text when I enter another textField.

This is my code

    class _ProfileState extends State<Profile> {
      bool _hasInputError = false;
  var idNumber = '';
  var nombreUser = "";
  FocusNode focusNode;
  void initState() {
    super.initState();
    focusNode = new FocusNode();
    focusNode.addListener(() {
      if (!focusNode.hasFocus) {
        setState(() {
          _hasInputError = idNumber.length < 3;
        });
      }
    });
  }
      @override
      Widget build(BuildContext context) {
    


        final nombreUserField = TextField(
          focusNode: _focusNode,
          onChanged: (String text) {
            nombreUser = text;
          },
        );   
        final idNumberElement = TextField(
          focusNode: _focusNode,
          decoration: InputDecoration(
            errorText: _hasInputError ? "Id is too short" : null,
            counterText: "",
          ),
          onChanged: (String tex) {
            idNumber = tex;
          },
        );
        return WillPopScope(
            child: Scaffold(
              body: Listener(
                onPointerUp: (e) {
                  FocusScope.of(context).requestFocus(FocusNode());
                },
                child: SingleChildScrollView(
                  child: Container(child: Column(
                      children: <Widget>[
                        SizedBox(
                          height: 10,
                        ),
                        idNumberElement,
                        SizedBox(
                          height: 20,
                        ),
                        nombreUserField,
                      ],
                    ),
                  ),
                ),
              ),
            ));
      }
    }

I tried to make the validation appear in the onEditingComplete but it doesn't work. I Try this answer but it's doesn't work.

How to listen focus change in flutter?

Does this answer your question? [How to listen focus change in flutter?](https://stackoverflow.com/questions/47965141/how-to-listen-focus-change-in-flutter) — Ravinder Kumar, Nov 14 '19 at 18:26
You can also validate on the ```blur``` event. Leaving a field fires a ```blur``` even ton that field. — Akin Okegbile, Nov 14 '19 at 21:04

Ayush Bherwani · Answer 1 · 2019-11-14T19:39:41.097

5

initState should be out of the build function. You have declared initState inside build

  FocusNode focusNode;
  void initState() {
    super.initState();
    focusNode = new FocusNode();
    focusNode.addListener(() {
      if (!focusNode.hasFocus) {
        setState(() {
          _hasInputError = idNumber.length < 3;
        });
      }
    });
  }
  @override
  Widget build(BuildContext context){
  ..
  }

Your Code

@override
  Widget build(BuildContext context) {
    var _focusNode = FocusNode();
void initState() {
  super.initState();
  _focusNode.addListener(() {
    if (!_focusNode.hasFocus) {
      if (idNumber.length < 3) {
        "Id is too short";
      }
    }
  });
}
..
}

You should also use setState to indicate that you have changed the value of _hasInputError so that the framework might schedule a build and the user interface for this subtree might be updated to reflect the new state

You have same FocusNode object in both TextField. Remove the _focusNode from nombreUserField. FocusNode is used to identify a specific TextField in Flutter’s focus tree. Every TextField should have a different FocusNode.

edited Nov 14 '19 at 19:39

answered Nov 14 '19 at 18:59

Ayush Bherwani

2,409
1
15
21

1

You have a condition `idNumber.length < 3`. According to this condition, it is false. Either set `idNumber.length <= 3` or check if it raises an error for only two characters. – Ayush Bherwani Nov 14 '19 at 19:20
1

You have same `focusNode` in both `TextField`. Remove the `_focusNode` from `nombreUserField`. – Ayush Bherwani Nov 14 '19 at 19:29
But I need to validate those 2 textField – Cristian F. Bustos Nov 14 '19 at 19:31
1

`FocusNode` is used to identify a specific `TextField` in Flutter’s focus tree. Every `TextFiedl` should have a different `FocusNode`. – Ayush Bherwani Nov 14 '19 at 19:33
You can create another `FocusNode` named `_anotherFocusNode` and assign it to `nomberUserField` – Ayush Bherwani Nov 14 '19 at 19:36
1

I mean, I should have something similar to this: FocusNode focusNodeidNumber; FocusNode focusNodeNameUser; – Cristian F. Bustos Nov 14 '19 at 19:36

score 1 · Answer 2 · answered Nov 14 '19 at 18:13

1

I suppose you should add

if(!focusNode.hasfocus){
    // Do your stuff
}

Inside the focusNode listener

answered Nov 14 '19 at 18:13

Amir Ali Aghamali

582
1
7
23

It doesn't work for me. var _focusNode = FocusNode(); void initState() { super.initState(); } _focusNode.addListener(() { if (!_focusNode.hasFocus) { if (idNumber.length < 3) "Id is too short"; } }); – Cristian F. Bustos Nov 14 '19 at 18:39

score 1 · Answer 3 · answered Nov 15 '19 at 11:10

You need a BLoC pattern to manage this.

This is a fantastic library for BLoC, maintained by Felix

Here is the sample. This is a login screen example where we check whether the entered text is a valid email or not and password matches some specific criteria.

Though the provided sample is not the exact match that you're looking for, but you can use it as an example to manage your own state.

For Example:

You enter a text in TextField1.
Now you click TextField2.
When the first view loses its focus

if(!firstNode.hasfocus){
    //your code
}

Fire an event.

If the entered value is invalid display an appropriate error message.

Devashish · Answer 4 · 2021-05-01T22:02:40.197

Here we can make use of

 _formKey.currentState.validate();

where _formKey, key given to the form

 final _formKey = GlobalKey<FormState>();

and the fields has validator property defined.

e.g.

     Form(
        key: _formKey,
        child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Title',
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
                onSaved: (value) {},
              ),
            ],
        ));

This does not answer the question. They were asking about validating when focusing *another* text field. — Toma, Jul 19 '22 at 19:42

Validate textField when I focus on another textField

4 Answers4