How to Validate TextField and TextFormField Values in Flutter Form

In this example, we are going to show you the easiest way to validate TextFiled or TextFormField in Flutter App. Validation is very important to retrieve correct data from users. See the example below to validate email, full name, phone number, credit card number, URL, and many more.

To validate the correctness of data, you can use Regular Expression (Regex) with the pattern.

RegExp(r'^[a-z A-Z]+$')

This pattern allows upper/lower case alphabets and space.

RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$')

This regex checks email with domain extension length. Allows 2 to 4 domain extension lengths. For example, .com has 3 characters, .np as 2 characters, .store as 4 characters.

RegExp(r'^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$')

This pattern allows "+" single sign at first.

if(fname.text.length > 10){
    //length of textfield with controller "name" has more than 10 characters.
}

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final formKey = GlobalKey<FormState>(); //key for form

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Form Validation"),
             backgroundColor: Colors.indigoAccent,
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            child: Form( 
              key: formKey, //key for form
              child:Column(children: [
                     
                     TextFormField(
                        decoration: InputDecoration( 
                          labelText: 'Enter Name'
                        ),
                        validator: (value){
                          if(value.isEmpty || !RegExp(r'^[a-z A-Z]+$').hasMatch(value)){
                              //allow upper and lower case alphabets and space
                              return "Enter Correct Name";
                          }else{
                             return null;
                          }
                        },
                     ),

                     TextFormField(
                       decoration: InputDecoration( 
                          labelText: 'Enter Phone Number'
                        ),
                        validator: (value){
                          if(value.isEmpty || !RegExp(r'^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$').hasMatch(value)){
                              //  r'^[0-9]{10}$' pattern plain match number with length 10
                              return "Enter Correct Phone Number";
                          }else{
                             return null;
                          }
                        },
                     ),

                     TextFormField(
                        decoration: InputDecoration( 
                          labelText: 'Enter Email'
                        ),
                        validator: (value){
                          if(value.isEmpty || !RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)){
                              return "Enter Correct Email Address";
                          }else{
                             return null;
                          }
                        },
                     ),
                     
                     ElevatedButton(
                      onPressed: (){
                          if(formKey.currentState.validate()){
                             //check if form data are valid, 
                             // your process task ahed if all data are valid
                          }
                      },
                      child: Text("Submit Data")
                    )

                ],
               ),
            ),
          )
       );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  TextEditingController fname = TextEditingController();
  bool texterror = false;

  @override
  void initState() {
    fname.text = "";
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("TextField Validation"),
             backgroundColor: Colors.indigoAccent,
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            child: Column(children: [
                     TextField(
                       controller: fname,
                       decoration: InputDecoration( 
                         labelText: "Your Name",
                         errorText: texterror?"Enter Correct Name":null,
                       )
                     ),
                     
                     ElevatedButton(
                      onPressed: (){
                         if(fname.text.isEmpty || !RegExp(r'^[a-z A-Z]+$').hasMatch(fname.text)){
                              setState(() {
                                texterror = true;
                              });
                          }else{
                             setState(() {
                                texterror = false;
                              });
                          }
                      },
                      child: Text("Submit Data")
                    )

                ],
            )
          )
       );
  }
}

Furthermore, you can validate data easily without using Regex. For that, add validators flutter package to your dependency by adding the following line in pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  validators: ^3.0.0

Import package to Script:

import 'package:validators/validators.dart';

if(isEmail(value)){
  //value is email
}

if(isURL(value)){
  //value is web URL link
}

if(isAlpha(value)){
  //value has alphabets only
}

if(isCreditCard(value)){
  //value is credit card number
}

if(isCreditCard(value)){
  //value is credit card number
}

contains - check if the string contains the seed.
equals - check if the string matches the comparison.
isAfter - check if the string is a date that's after the specified date.
isAlphanumeric - check if the string str contains only letters and numbers.
isBefore - check if the string is a date that's before the specified date.
isFloat - check if the string str is a float.
isFQDN - check if the string str is a fully qualified domain name (e.g. domain.com).
isHexadecimal - check if the string stris a hexadecimal number.
isHexColor - check if the string str is a hexadecimal color.
isInt - check if the string str is an integer.
isIP - check if the string str is IP version 4 or 6.
isISBN - check if the string is an ISBN (version 10 or 13).
isJSON - check if the string is valid JSON.
isLength(String str, int min, [int? max]) - check if the length of the string str falls in a range.
isLowercase - check if the string str is lowercase.
isMongoId - check if the string is a valid hex-encoded representation of a MongoDB ObjectId.
isNull - check if the string str is null.
isNumeric - check if the string str contains only numbers.
isPostalCode - Check if the string is postal or zip code.
isUppercase - check if the string str is uppercase.
isUUID - check if the string is a UUID (version 3, 4 or 5).
matches - check if string str matches the Regex pattern.