So I'm trying to create a form, which shall validate that all field is filled before submitting, but it is skipping the validation of my IntlPhoneField. Here's the snippet:
import 'package:flutter/material.dart';
import 'package:intl_phone_field/country_picker_dialog.dart';
import 'package:intl_phone_field/intl_phone_field.dart';
class RegisterScreen extends StatefulWidget {
const RegisterScreen({super.key});
@override
State<RegisterScreen> createState() => _RegisterScreenState();
}
class _RegisterScreenState extends State<RegisterScreen> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
final _phoneNumberController = TextEditingController();
final _NameController = TextEditingController();
@override
void dispose() {
super.dispose();
_phoneNumberController.dispose();
_NameController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(
height: 18,
),
Center(
child: Form(
key: _formKey,
child: Column(
children: [
const SizedBox(height: 60),
TextFormField(
controller: _NameController,
validator: (value) {
if (value == null || value.isEmpty) {
return "Sila isi ruangan ini.";
}
return null;
},
),
const SizedBox(height: 20),
IntlPhoneField(
disableLengthCheck: true,
initialCountryCode: 'MY',
validator: (value) {
String pattern = r'(^(?:[+0]9)?[0-9]{10,12}$)';
RegExp regExp = RegExp(pattern);
if (value == null || value.number.isEmpty) {
return 'Sila masukkan nombor telefon.';
} else if (!regExp.hasMatch(value.number)) {
return 'Sila masukkan nombor telefon yang sah.';
}
return null;
},
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_formKey.currentState!.validate();
if (_formKey.currentState!.validate()) {
Navigator.of(context).pop();
}
},
child: const Text(
'Submit',
),
),
const SizedBox(height: 20),
],
),
),
),
],
),
),
),
);
}
So upon arriving this page, all I need is to just fill in the first field, and I can press submit and pass the validation and trigger the Navigator.of pop. Even if I straight away press Submit upon arriving this page, only the first field's empty error text is triggered. Its like the phonenumber field validator is being skipped or sleeping and will only works after I start interacting with it. Meaning after reaching the page, if I click on the number field, type smthg n delete then I wont be able to press submit cuz the phone number field empty is triggered. But if I totally ignore the field from the start then I can pass through without filling it which is a problem.
I tried passing my own textcontroller but it didnt change anything.
GPT suggest me to wrap it in another form to be called specifically before submitting, but this is a bit troubling for huge number of field with many phone numbers so I was wondering if theres another fix.
My current fix is autovalidatemode.always but with this, the error text pops up from the get go which makes it less pretty. It does ensure you need to fill in the field before being able to press submit tho.
Also Im a beginner in both flutter and stackoverflow, sorry if my question isnt clear and thanks for reading!
