How to implement this in textformfield in flutter-CodePudding

I created a TextFormField forms and not all of them get validated.

My code:

Form(
    key: _formKey,
    child: TextFormField(
      key: ValueKey('email'),
      decoration: InputDecoration(
        hintText: 'Email Address',
        enabledBorder: OutlineInputBorder(
          borderSide:
              BorderSide(color: Colors.white38, width: 2),
        ),
        contentPadding:
            EdgeInsets.fromLTRB(20, 10.0, 20, 10.0),
        hintStyle: const TextStyle(
          fontSize: 18,
          color: Colors.white,
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.white, width: 2)
        ),

CodePudding user response：

You need to call validator on TextFormField and use OutlineInputBorder as Panda Bash showed

Form(
  key: _formKey,
  child: TextFormField(
    validator: (value) {
      //your logic
      if (value == null || value.isEmpty) return "Enter data";
    },
    decoration: InputDecoration(
      border: OutlineInputBorder(),
      enabledBorder: OutlineInputBorder(),
      errorBorder: OutlineInputBorder(),
      focusedBorder: OutlineInputBorder(),
      disabledBorder: OutlineInputBorder(),
      focusedErrorBorder: OutlineInputBorder(),
      hintText: 'Email Address',
    ),
  ),
),

More about validation

CodePudding user response：

TextFormField(
key: const ValueKey('email'),
onChanged:(value){
validate();
},
decoration: InputDecoration(
hintText: 'Email Address',
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white38, width: 2),
),
contentPadding:
EdgeInsets.fromLTRB(20, 10.0, 20, 10.0),
hintStyle: const TextStyle(
fontSize: 18,
color: Colors.white,
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 2)),
),
));


onChanged:(value){
validate();
 },

CodePudding user response：

Here's the code for email validation in TextFormField

 Form(
       key:_formkey,
       child: TextFormField(
        autovalidateMode: 
                       AutovalidateMode.onUserInteraction,
          autofillHints: const [AutofillHints.email],
          key: const ValueKey('email'),
          decoration: const InputDecoration(
               hintText: 'Email Address',
                enabledBorder: OutlineInputBorder(
                  borderSide:
                              BorderSide(color: Colors.white38, width: 2),
                   ),
                contentPadding: EdgeInsets.fromLTRB(20, 10.0, 20, 10.0),
                        hintStyle: TextStyle(
                          fontSize: 18,
                          color: Colors.white,
                        ),
                        focusedBorder: OutlineInputBorder(
                            borderSide:
                                BorderSide(color: Colors.white, width: 2)),
                      ),
             validator: (value) {
                        if (value != null) {
                          if (value.isNotEmpty) {
                            String pattern =
                                r'^(([^<>()[\]\\.,;:\s@\"] (\.[^<>()[\]\\.,;:\s@\"] )*)|(\". \"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9] \.) [a-zA-Z]{2,}))$';
                            RegExp regex =  RegExp(pattern);
                            if (!regex.hasMatch(value)) {
                              print('validation done');
                              print('Value ====> $value');
                              return 'Enter Valid Email';
                            }
                          }
                        } else if (value == '' || value == null) {
                          print('validation not req');
                          print('Value ====> $value');
                          return null;
                        } else {
                          return null;
                        }
                      },
                    ),
                  ),

Hope it helps.