TextFormField Validator not showing validator message

Question

I tried to create this form with validation, so it shows the errors when the user returns each field. But for some reason it doesn't work. I have no reason why. I'm just stuck now.

Here's the code:

import 'package:flutter/material.dart';
import 'package:validate/validate.dart';

void main() => runApp(new MaterialApp(
  title: 'Forms in Flutter',
  home: new LoginForm(),
  theme: ThemeData.dark(),
));

class LoginForm extends StatefulWidget {
  String email;
  String password;
  final Function saveEmail;
  final Function savePassword;
  final Function attemptLogin;

  LoginForm({this.email, this.password, this.saveEmail, this.savePassword,
    this.attemptLogin});

  @override
  LoginFormState createState(){
    return new LoginFormState();
  }
}

class LoginFormState extends State<LoginForm> {
  final loginFormKey = GlobalKey<FormState>();
  final emailController = new TextEditingController();
  final passController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Login'),
        ),
        body: new Container(
          padding: new EdgeInsets.all(10.0),
          child: new Form(
            key: loginFormKey,
            child: new Column(
              children: <Widget>[
                new Row(
                  children: <Widget>[
                    new Container(
                      width: 2.0,
                      height: 18.0,
                      color: Colors.white,
                    ),
                    new Container(
                        width: 5.0,
                        height: 0.0
                    ),
                    new Expanded(child: new TextFormField(
                      decoration: new InputDecoration.collapsed(
                        hintText: "EMAIL",
                      ),

                      validator: (String value) {
                        if (!Validate.isEmail(value)) {
                          return 'Please enter Email';
                        }
                      },
                      onFieldSubmitted: (val) {
                        print(loginFormKey.currentState.validate());
                        if (loginFormKey.currentState.validate()) {
                          widget.email = val;
                          widget.saveEmail(val);
                        }
                      },
                      controller: emailController,

                    ),)
                  ],

                ),

                new Row(
                  children: <Widget>[
                    new Container(
                      width: 2.0,
                      height: 18.0,
                      color: Colors.white,
                      padding: const EdgeInsets.fromLTRB(0.0, 0.0, 5.0, 0.0),
                    ),
                    new Container(
                        width: 5.0,
                        height: 0.0
                    ),
                    new Expanded(child: new TextFormField(
                      obscureText: true,
                      decoration: new InputDecoration.collapsed(
                          hintText: 'PASSWORD',
                      ),
                      validator: (val) =>
                      val.length < 6 ?
                      'Still too short' : '',
                      onFieldSubmitted: (val) {
                        if (loginFormKey.currentState.validate()) {
                          widget.email = emailController.text;
                          print(widget.email);
                          widget.saveEmail(emailController.text);
                          widget.password = val;
                          print(widget.password);
                          widget.savePassword(val);
                          widget.attemptLogin();
                        }
                      },
                      controller: passController,
                    ),)
                  ],
                )
              ],
            ),
          ),
        )
    );
  }
}

I really don't know what's causing this. It seems like everything in the onfieldSubmitted part of the fields don't work. If I remove the If statements, they work okay, but once it's added it gives no response.

Seems like something simple but I'm just missing the point. Any help would be greatly appreciated. Thanks.

Answer 1

am having the same issue now. I think the !Validate.isEmail(value) is not working. I commented it out and my code ran well. Try writing your own custom email validation instead of using !Validate.isEmail(value)

Answer 2

The onFieldSubmitted property works when clicking enter or submit on the keyboard. I think, you should add a submit button for submitting because your validations works for form, not an field or input. So, It means if a user entered the email address but this user didn't enter any password, it will take validation error message for password on email field when clicked the enter button. It's not a good feedback. If you use a submit button, it should shows more good feedback for validation messages.

// The button widget
new FlatButton(
  onPressed: () => this._submit(),
  child: new Text('Login')
);

// The submit function
void _submit() {
  if (this.loginFormKey.currentState.validate()) {
    this.loginFormKey.currentState.save();
    // Do your jobs with the validated form data.
  }
}