如何防止所有表单字段在填写单个字段时进行验证

Posted 2023-03-07

【中文标题】如何防止所有表单字段在填写单个字段时进行验证

【英文标题】：How to prevent all form fields to validate when a single field is being filled

【发布时间】：2021-03-05 11:01:54

【问题描述】：

我正在设计一个表单域来创建一个用户，并且我已经为这些设置了验证器，但是我遇到了一个问题：当我开始填写一个域时，所有的表单域都被验证了，因此到处都显示错误文本 (related picture).

有没有办法在其他字段未被触及时阻止它们验证？

编辑：（很抱歉从话题开始到本次编辑之间的很长一段时间，我有多个任务在工作，而这个优先级较低）

我想我知道为什么我的自动验证不起作用...当 onChange 被触发时，它会调用一个函数来检查整个表单的有效性以启用或禁用发送按钮，从而在所有字段。如果是这样，有没有办法在不触发错误消息的情况下检查有效性？

【问题讨论】：

您是否尝试过使用 AutovalidateMode autoValidateMode = AutovalidateMode.onUserInteraction; ?

是的，我做到了，我什至尝试在某个时候检查焦点 (autovalidateMode: focus.hasFocus ? AutovalidateMode.onUserInteraction : AutovalidateMode.disabled)，但这些都没有成功...

【参考方案1】：

您可以调用_formKey.currentState.validate() 到点击验证按钮来解决此问题。喜欢，参考下面的代码。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    final appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: MyCustomForm(),
      ),
    );
  


class MyCustomForm extends StatefulWidget 
  @override
  MyCustomFormState createState() 
    return MyCustomFormState();
  


class MyCustomFormState extends State<MyCustomForm> 
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(),
      body: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              height: 60.0,
              child: TextFormField(
                validator: (value) 
                  if (value.isEmpty) 
                    return 'Please enter some text';
                  
                  return null;
                ,
              ),
            ),
            Container(
              height: 60.0,
              child: TextFormField(
                validator: (value) 
                  if (value.isEmpty) 
                    return 'Please enter some text';
                  
                  return null;
                ,
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 16.0),
              child: ElevatedButton(
                onPressed: () 
                  if (_formKey.currentState.validate()) 
                    ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('Processing Data')));
                  
                ,
                child: Text('Validate'),
              ),
            ),
          ],
        ),
      ),
    );
  

【讨论】：

如果我理解正确，这个解决方案只会在最后发送验证，发送填写的表格，对吧？这是一个诱人的变通解决方案，尽管我更希望它是动态的。

好的。如果我理解正确，您是否只想在输入文本时仅验证当前关注的字段？

长话短说，在我开始编辑自己的内容之前，我不希望任何表单域得到验证。

autovalidateMode 可以帮助你。

我遇到了类似的问题，除了我希望禁用提交按钮，直到所有字段都有效。我需要能够检查表单状态，而实际上不会产生向用户显示错误的副作用。这可能吗？