How to prevent all form fields to validate when a single field is being filled

user_5092764 0
Viewed 642


I am designing a form field to create a user and I have put validators for these, but I ran into an issue : when I start filling a field, all the form fields are being validated, thus displaying error texts everywhere (related picture).

Is there a way to prevent the other fields validation when they are untouched ?

EDIT : (Sorry for the long time between the opening of the topic and this edit, I have multiple tasks at work and this one is of lesser priority)

I think I know why my autovalidate doesn't work... When onChange is triggered it calls a function that checks for the validity of the entire form to enable or disable the send button, thus displaying the error messages under all the fields. If that's it, is there a way to check for validity without triggering the error messages ?

flutter forms
1 Answers

You can call _formKey.currentState.validate() to the validate button onTap to resolve this issue. Like, refer to the code below.

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'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
user_151448550
Related