How to validate only one field in a Flutter form? - flutter

Question

I have a form with several fields, at the end of the form there is a Login button which validates the whole form before submit. Within the form there is a "Send Code" button which requires only the email address as mandatory field. How can I just highlight the email address field without highlighting the password field when the Send Code button is pressed?
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Form(
key: _formKey,
child: Column(children: [
Row(children: [
Expanded(
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email Address'),
controller: _EmailAddressController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter email';
}
return null;
},
),
),
Expanded(
child: TextButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: Text('Send Code',
style: TextStyle(
fontSize: 24,
color: Colors.green[800],
fontWeight: FontWeight.bold)),
),
)
]),
SizedBox(height: 10),
TextFormField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: 'Password'),
controller: _PasswordController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter password';
}
return null;
},
),
TextButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: Text('Login',
style: TextStyle(
fontSize: 24,
color: Colors.grey[800],
fontWeight: FontWeight.bold)),
),
]
),
),
),
),
);
}

Answer 1

Please try this code
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Form(
key: _formKey,
child: Column(children: [
Row(children: [
Expanded(
child: TextFormField(
decoration: InputDecoration(border: OutlineInputBorder(), labelText: 'Email Address'),
controller: _EmailAddressController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter email';
}
return null;
},
),
),
Expanded(
child: TextButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: Text('Send Code', style: TextStyle(fontSize: 24, color: Colors.green[800], fontWeight: FontWeight.bold)),
),
)
]),
const SizedBox(height: 10),
TextFormField(
obscureText: true,
decoration: const InputDecoration(border: OutlineInputBorder(), labelText: 'Password'),
controller: _PasswordController,
),
TextButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: Text('Login', style: TextStyle(fontSize: 24, color: Colors.grey[800], fontWeight: FontWeight.bold)),
),
]),
),
),
),
);
}

Answer 2

You can check if _EmailAddressController has the text then validate for password.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Form(
key: _formKey,
child: Column(children: [
Row(children: [
Expanded(
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email Address'),
controller: _EmailAddressController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter email';
}
return null;
},
),
),
Expanded(
child: TextButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: Text('Send Code',
style: TextStyle(
fontSize: 24,
color: Colors.green[800],
fontWeight: FontWeight.bold)),
),
)
]),
SizedBox(height: 10),
TextFormField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: 'Password'),
controller: _PasswordController,
validator: (value) {
if (!_EmailAddressController.text.isEmpty && (value == null || value.isEmpty)) {//You can also add condition for valid email.
return 'Please enter password';
}
return null;
},
),
TextButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: Text('Login',
style: TextStyle(
fontSize: 24,
color: Colors.grey[800],
fontWeight: FontWeight.bold)),
),
]
),
),
),
),
);
}