Flutter中AutovalidateMode设为onUserInteraction时，操作一个TextFormField为何触发另一个的验证？

嘿，我懂你遇到的这个糟心问题——明明只是点了第一个输入框输入内容，第二个却跟着跑验证逻辑，完全不是想要的效果对吧？

问题根源其实在AutovalidateMode.onUserInteraction的默认行为：当Form表单里任何一个字段触发用户交互时，所有设置了这个模式的字段都会一起执行验证。要实现「只有当前操作的字段才触发验证」，我们得换个思路，手动给每个字段单独控制验证时机。

下面是具体的实现方案，直接改你的代码就行：

首先，我们需要为每个TextFormField创建独立的FocusNode和GlobalKey<FormFieldState>，用来精准控制单个字段的状态和验证操作。然后关闭全局的自动验证，通过监听焦点变化或者输入事件来手动触发当前字段的验证。

修改后的完整代码如下：

class YourScreen extends StatefulWidget {
  const YourScreen({super.key});

  @override
  State<YourScreen> createState() => _YourScreenState();
}

class _YourScreenState extends State<YourScreen> {
  final formKey = GlobalKey<FormState>();
  final TFKdPelanggan = TextEditingController();
  final TFEmail = TextEditingController();

  // 为每个字段创建独立的焦点节点和表单字段Key
  final _kodePelangganFocusNode = FocusNode();
  final _kodePelangganFieldKey = GlobalKey<FormFieldState>();
  final _emailFocusNode = FocusNode();
  final _emailFieldKey = GlobalKey<FormFieldState>();

  @override
  void initState() {
    super.initState();
    // 监听焦点离开事件：当用户切换到其他字段时，验证当前字段
    _kodePelangganFocusNode.addListener(() {
      if (!_kodePelangganFocusNode.hasFocus) {
        _kodePelangganFieldKey.currentState?.validate();
      }
    });

    _emailFocusNode.addListener(() {
      if (!_emailFocusNode.hasFocus) {
        _emailFieldKey.currentState?.validate();
      }
    });
  }

  @override
  void dispose() {
    // 记得释放资源，避免内存泄漏
    _kodePelangganFocusNode.dispose();
    _emailFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: formKey,
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 15),
              child: TextFormField(
                key: _kodePelangganFieldKey,
                focusNode: _kodePelangganFocusNode,
                autovalidateMode: AutovalidateMode.disabled, // 关闭全局自动验证
                controller: TFKdPelanggan,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Kode Pelanggan',
                  hintText: 'Masukkan Kode Pelanggan Anda'
                ),
                validator: RequiredValidator(errorText: "Kode Pelanggan tidak boleh kosong"),
                // 可选：如果需要输入时实时验证，就加上这个回调
                onChanged: (_) {
                  _kodePelangganFieldKey.currentState?.validate();
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(
                left: 15.0, right: 15.0, top: 15, bottom: 0),
              child: TextFormField(
                key: _emailFieldKey,
                focusNode: _emailFocusNode,
                autovalidateMode: AutovalidateMode.disabled,
                controller: TFEmail,
                keyboardType: TextInputType.emailAddress,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Email',
                  hintText: 'Masukkan Email Anda'
                ),
                validator: MultiValidator([
                  RequiredValidator(errorText: "Email tidak boleh kosong"),
                  EmailValidator(errorText: "Email tidak valid")
                ]),
                onChanged: (_) {
                  _emailFieldKey.currentState?.validate();
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明： #

• 独立的Key和FocusNode：每个字段都有自己的GlobalKey<FormFieldState>，这样我们可以精准调用单个字段的validate()方法，不会影响其他字段。
• 手动触发验证：通过FocusNode监听焦点离开事件，确保用户切换字段时完成当前字段的验证；onChanged则可以实现输入过程中的实时验证，不需要的话可以删掉这个回调。
• 关闭全局自动验证：把autovalidateMode设为AutovalidateMode.disabled，彻底避免了Form全局触发所有字段验证的问题。

这样修改后，就只有你正在操作的那个TextFormField会触发验证逻辑啦！

内容的提问来源于stack exchange，提问作者Eggy