Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to handle TextField validation in password in Flutter

Tags:

flutter

dart

I created a login page and I need to add these things to my password. How do I do it with validation alert message?

  • Minimum 1 Upper case
  • Minimum 1 lowercase
  • Minimum 1 Numeric Number
  • Minimum 1 Special Character
  • Common Allow Character ( ! @ # $ & * ~ )
like image 630
BIS Tech Avatar asked May 22 '19 09:05

BIS Tech


People also ask

How do you validate TextField Flutter?

In this example, learn how to add validation to a form that has a single text field using the following steps: Create a Form with a GlobalKey . Add a TextFormField with validation logic. Create a button to validate and submit the form.


2 Answers

You need to use Regular Expression to validate the structure.

 bool validateStructure(String value){         String  pattern = r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{8,}$';         RegExp regExp = new RegExp(pattern);         return regExp.hasMatch(value);   }  output:       Vignesh123! : true     vignesh123 : false     VIGNESH123! : false     vignesh@ : false     12345678? : false 

This function will validate the passed value is having the structure or not.

    var _usernameController = TextEditingController();     String _usernameError;      ...      @override     Widget build(BuildContext context) {         return         ...         TextFormField(           controller: _usernameController,           decoration: InputDecoration(               hintText: "Username", errorText: _usernameError),           style: TextStyle(fontSize: 18.0),         ),         Container(           width: double.infinity,           height: 50.0,           child: RaisedButton(             onPressed: validate,             child: Text(               "Login",               style: TextStyle(color: Colors.white),             ),             color: Theme.of(context).primaryColor,             shape: RoundedRectangleBorder(               borderRadius: BorderRadius.circular(50.0),             ),           ),         ),         ...     }      ...      validate(){         if(!validateStructure(_usernameController.text)){             setState(() {                 _usernameError = emailError;                 _passwordError = passwordError;             });             // show dialog/snackbar to get user attention.             return;         }         // Continue      } 
like image 163
Vignesh KM Avatar answered Oct 05 '22 22:10

Vignesh KM


Your regular expression should look like:

r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{8,}$ 

Here is an explanation:

r'^   (?=.*[A-Z])       // should contain at least one upper case   (?=.*[a-z])       // should contain at least one lower case   (?=.*?[0-9])      // should contain at least one digit   (?=.*?[!@#\$&*~]) // should contain at least one Special character   .{8,}             // Must be at least 8 characters in length   $ 

Match above expression with your password string. Using this method-

    String? validatePassword(String value) {     RegExp regex =         RegExp(r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{8,}$');     if (value.isEmpty) {       return 'Please enter password';     } else {       if (!regex.hasMatch(value)) {         return 'Enter valid password';       } else {         return null;       }     }   } 
like image 40
Nikhat Shaikh Avatar answered Oct 05 '22 22:10

Nikhat Shaikh