30

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.

2

9 Answers 9

46

You can use regex for this

Form and TextFormField like so

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

then the validation function

String? validateEmail(String? value) {
  const pattern = r"(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'"
      r'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-'
      r'\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*'
      r'[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4]'
      r'[0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9]'
      r'[0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\'
      r'x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])';
  final regex = RegExp(pattern);

  return value!.isNotEmpty && !regex.hasMatch(value)
      ? 'Enter a valid email address'
      : null;
}

Link to regex https://stackoverflow.com/a/201378/12695188

3
29

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.

4
  • How can you make the validator display the message only when a submit button is pressed? When you do it this way it will display "Please enter a valid email" from the first letter you type. Aug 27, 2021 at 9:58
  • 1
    There's a few easy options. One way to do it is to have a boolean in your class, something like bool submitButtonPressed and to set autovalidate to false until submit has been pressed. Or you could return null from your validator until that is true. Or... upi could put change listeners for onSubmitted or onChanged or onEditingComplete on each form element and manage the whole thing manually. Aug 30, 2021 at 5:50
  • Is there is a modified version of this? For example I want to see if a mail ends with '[email protected]' or not
    – Tim's
    Dec 10, 2021 at 11:33
  • The validation logic is quite simple - either you return null if the string is valid or an error string if not. So if you want to check for @harvard.edu, you could simply do something like (EmailValidator.validate(value) && email.endsWith("@harvard.edu")). Or use regex. Dec 10, 2021 at 12:29
6
  TextFormField(
          validator: (val) => val.isEmpty || !val.contains("@")
              ? "enter a valid eamil"
              : null,
         
          decoration: InputDecoration(hintText: 'email'),
        ),

In the validator first we are checking if the formfeild is empty and also we are checking if the text entered dose not contains "@" in it . If those conditions are true then we are returning a text "enter a valid email" or else we are not returning anything

0
3

QUICK FIX 🙂 Use this in your TextFormField.

validator: (value) {
  if(value == null || value.isEmpty || !value.contains('@') || !value.contains('.')){
    return 'Invalid Email';
  }
  return null;
},
2

I suggest use of this excellent library called validators

  1. Add dependency to your package's pubspec.yaml file:
    dependencies:
      validators: ^2.0.0 # change to latest version
  1. Run from the command line:
    $ pub get
    // on VSCode u need not do anything.
  1. Import in your Dart code:
    import 'package:validators/validators.dart';
  1. Validate your field
Form(
  child: TextFormField(
    validator: (val) => !isEmail(val) ? "Invalid Email" : null;,
  ),
)
1

The previous answers all discuss options for verifying a TextFormField in a Form. The question asks about doing this in

TextFormField or TextField

TextField does not support the validator: named parameter but you can use any of the previously mentioned techniques to check the validity of the email every time the user modifies the email address text. Here is a simple example:

  TextField(
    keyboardType: TextInputType.emailAddress,
    textAlign: TextAlign.center,
    onChanged: (value) {
      setState(() {
        _email = value;
        _emailOk = EmailValidator.validate(_email);
      });
    },
    decoration:
        kTextFieldDecoration.copyWith(hintText: 'Enter your email'),
  ),

You can use the validation result as you see fit. One possibility is to keep a login button deactivated until a valid email address has been entered:

  ElevatedButton(
    child: Text('Log In'),
    // button is disabled until something has been entered in both fields.
    onPressed: (_passwordOk && _emailOk) ? ()=> _logInPressed() : null,
  ),
1

If you use flutter_form_builder with flutter_builder_validators

email verification can be done easily

FormBuilderTextField(
  name: 'email',
  decoration: InputDecoration(
    labelText: 'Email',
    errorText: _emailError,
  ),
  validator: FormBuilderValidators.compose([
      FormBuilderValidators.required(),
      FormBuilderValidators.email(),
  ]),
),
0
TextFormField(
  validator: (value) {
    if(value.isEmpty) {
      return "Please enter email";
    } else if(!value.contains("@")) {
      return "Please enter valid email";
    }
  },
  decoration: InputDecoration(hintText: 'email'),
),
-2

No need to use external libraries or Regex! Put your text field inside a form, set autovalidate to 'always' and inside TextFormField add a validator function:

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

Validator function:

 String? validateEmail(String? value) {    
      if (value != null) {
        if (value.length > 5 && value.contains('@') && value.endsWith('.com')) {
          return null;
        }
     return 'Enter a Valid Email Address';
    }

note: length > 5 because '.com' and '@' make 5 characters.

1
  • 1
    You can't use the check value.endsWith('.com') since every email address does not end with .com. There are for example email addresses which end with .co, .org, .net, .xyz and .fi
    – Crossoni
    May 5, 2022 at 9:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.