How to validate email in a TextFormField

Question

There is a way to validate the input of the user with a TextFormField or TextField,to reject the input if it's not an email.

Answer 1

You can use regex for this

Form and TextFormField like so

Form(
  autovalidateMode: AutovalidateMode.always,
  child: TextFormField(
    validator: (value) => validateEmail(value),
  ),
)

then the validation function

String validateEmail(String? value) {
    String pattern =
        r"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]"
        r"{0,253}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]"
        r"{0,253}[a-zA-Z0-9])?)*$";
    RegExp regex = RegExp(pattern);
    if (value == null || value.isEmpty || !regex.hasMatch(value))
      return 'Enter a valid email address';
    else
      return null;
  }

Answer 2

To validate the form, you can use the autovalidate flag and set up a validator for email. There are many options, including regex or manually writing your own checker, but there are also packages available which implement email checking already.

For example, https://pub.dev/packages/email_validator.

To use it, add it to your pubspec:

dependencies:
  email_validator: '^1.0.0'

import 'package:email_validator/email_validator.dart';

...

Form(
  autovalidate: true,
  child: TextFormField(
    validator: (value) => EmailValidator.validate(value) ? null : "Please enter a valid email",
  ),
)

There are many other validation packages, some of which support may different types of validation. See this search for more https://pub.dev/packages?q=email+validation.