How to add focus to textformfield which has validation error

Question

I have textformfields in my form. When I click on submit button the validation error displays under the textformfield. I want to add focus to that particular field so when user clicks on save button the field pops up. user should not need to scroll up and type the info. User should be able to directly start typing. In current scenario user gets confused and is unaware of why save button didnt work. Bcoz until scrolled up the error is unknown.

 TextFormField(
                  controller: NoteController,
                   validator: (String value){
                    if(value.isEmpty)
                      {
                        return "Note can't be null";
                      }
                    else
                      return null;
                   },
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(width: 2.0),)),
                  keyboardType: TextInputType.multiline,
                  minLines: 5,
                  maxLines: 5, 
                  onChanged: (value) {
                    this.note.note = value;
                  },

                ),

bool validateAndSave() {
    final form = globalFormKey.currentState;
    if (form.validate()) {
      form.save();
      return true;
    }
    return false;
  }

void _save() async {
    if (validateAndSave()) {
}
}

Yair Chen · Answer 1 · 2021-06-03T09:51:30.443

1

You can achieve that using FocusNode and TextField. you can read more about it here https://flutter.dev/docs/cookbook/forms/focus

Let me show you an example (Tried it and it works):

Before the build method:

  final FocusNode noteFocus = FocusNode();

In the build method:

 Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              // Add FocusNode to TextFieldForm
              focusNode: noteFocus,
              validator: (value) {
                if (value == null || value.isEmpty) {
                  // Request focus in case of error
                  noteFocus.requestFocus();
                  return "Note can't be null";
                }
                return null;
              },
            ),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  print('Validated');
                }
              },
              child: Text('Submit'),
            )
          ],
        ),
      ),

Let me know if you need anything else :)

edited Jun 03 '21 at 09:51

answered Jun 03 '21 at 06:24

Yair Chen

917
6
10

But using this how to set focus for the field which is showing error – Fathima Shafana Jun 03 '21 at 09:35
I added an example to show you :) @FathimaShafana – Yair Chen Jun 03 '21 at 09:51
No its not working. the textfield is not receiving focus. – Fathima Shafana Jun 03 '21 at 13:52
How to do the same when there are multiple textformfield? – Hardik Jun 20 '22 at 08:39

score 0 · Answer 2 · answered Jun 03 '21 at 06:25

Use FocusNode like this.

FocusNode focusNode = FocusNode();

TextFormField(
                  controller: NoteController,
                  focusNode: focusNode,
                   validator: (String value){
                    if(value.isEmpty)
                      {
                        Focus.of(context).requestFocus(focusNode);
                        return "Note can't be null";
                      }
                    else
                      return null;
                   },
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(width: 2.0),)),
                  keyboardType: TextInputType.multiline,
                  minLines: 5,
                  maxLines: 5, 
                  onChanged: (value) {
                    this.note.note = value;
                  },

                ),

It didn't work. The focus didnt shift to the textformfield which had error — Fathima Shafana, Jun 03 '21 at 06:46
Focus.of() was called with a context that does not contain a Focus between the given context and the nearest FocusScope widget. Moreover validation error also were not shown — Fathima Shafana, Jun 03 '21 at 06:51

How to add focus to textformfield which has validation error

2 Answers2