Validate a text form field only when lost focus.... instead of at every charactor with autovalidate=true

[Pascal Fournier]

Hello To all

I have a question about validating the text form field.

Is there a way... to only validate the value of a text form field only when it lost focus... so when users click elsewhere ?

I would like to call an API to check if username already exists on my database... so, i know if i set to true the autovalidate... it will validate every time the user press a key... so if a username has 20 characters.. it will call my API 20 times... So that why i wanted to call only when the text form field lost focus.

So i would like to check only if the text field lost focus !!

Can i achieve it ?

Thanks a lot !

Pascal

[Jason Phan]

Hi Pascal, 

You can create a FocusNode and pass it to your TextField. Here is the original code from Flutter with modification for your API check -

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Field Focus',
      home: MyCustomForm(),
    );
  }
}

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

// Define a corresponding State class.
// This class holds data related to the form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Define the focus node. To manage the lifecycle, create the FocusNode in
  // the initState method, and clean it up in the dispose method.
  FocusNode myFocusNode;

  @override
  void initState() {
    super.initState();

    myFocusNode = FocusNode();
  }

  @override
  void dispose() {
    // Clean up the focus node when the Form is disposed.
   myFocusNode.addListener(

    super.dispose();
  }

// Your Custom API check.
void apiCheck() {
  myFocusNode.addListener(() {
    // TextField lost focus
    if (!myFocusNode.hasFocus) {
      // Execute your API validation here
    }
  });
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Field Focus'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              focusNode: myFocusNode,
            ),
          ],
        ),
      ),
    );
  }
}

Be sure to dispose of the listener to save resources.

Best,
Jason

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/1b83aef6-fc0b-4431-a5f2-02d9dcd22509%40googlegroups.com.

--

Jason Phan

WhatsApp / Viber: +1 224 595 6839

Google | LinkedIn