Question

我尝试使用验证创建此表单，因此它会在用户返回每个字段时显示错误。但由于某种原因，它不起作用。我没理由。我现在才被困住了。

以下是代码：

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,
                    ),)
                  ],
                )
              ],
            ),
          ),
        )
    );
  }
}

我真的不知道造成这种情况的原因。似乎onfieldSubmitted部分字段中的所有内容都不起作用。如果我删除了If语句，它们可以正常工作，但是一旦添加它就没有响应。

似乎很简单，但我只是忽略了这一点。任何帮助将不胜感激。谢谢。

Answer 1

am现在有同样的问题。我认为!Validate.isEmail(value)无法正常工作。我注释掉了，我的代码运行良好。尝试编写自己的自定义电子邮件验证，而不要使用!Validate.isEmail(value)

Answer 2

在键盘上单击“输入”或“提交”时， onFieldSubmitted 属性可以正常工作。我认为，您应该添加一个提交按钮进行提交，因为您的验证适用于表单，而不是字段或输入。因此，这意味着如果用户输入了电子邮件地址但该用户没有输入任何密码，则单击“输入”按钮时，将在电子邮件字段上显示密码验证错误消息。这不是一个好的反馈。如果您使用提交按钮，它应该显示更多有关验证消息的良好反馈。

// 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.
  }
}

TextFormField Validator未显示验证程序消息

2 个答案: