When click on submit button IntlPhoneField showing invalid mobile number error on screen when field is empty

Question

I have one form user should fill and give some validations. but I don't want phone field mandatory but when I click on submit button it showing an error on screen saying Invalid Mobile Number. I used IntlPhoneField package for mobile number field.

I am not providing any validations still am facing this issue. I am sharing my code with this platform. please check if there is anything that I can add into my code. and solve my problem.

below is my code for IntlPhoneField

                     Container(
                          height: 12.h,
                          padding:
                              EdgeInsets.fromLTRB(2.h, 2.h, 0.w, 0.5.h),
                          child: IntlPhoneField(
                            controller: _mobileNumberController,
                            decoration: InputDecoration(
                              alignLabelWithHint: true,
                              contentPadding:
                                  EdgeInsets.symmetric(vertical: 1.2.h),
                              prefixIcon: const Icon(Icons.call_outlined),
                              hintText: "Phone Number",
                              filled: true,
                              fillColor: ColorConstants.grey,
                              border: OutlineInputBorder(
                                borderSide: BorderSide.none,
                                borderRadius: BorderRadius.circular(30),
                              ),
                              counter: const Offstage(),
                              labelStyle: const TextStyle(
                                fontSize: 14,
                                color: Color(0xFF999999),
                              ),
                              hintStyle: const TextStyle(
                                fontSize: 14,
                                color: Color(0xFF999999),
                              ),
                            ),

                            inputFormatters: [
                              FilteringTextInputFormatter.digitsOnly
                            ],
                            
                            validator: (phone) {
                              // Check if the field is empty and return null to skip validation
                              if (isMobileNumberEmpty) {
                                return null;
                              }
                              // Implement your custom validation logic here
                              if (!isMobileNumberEmpty) {
                                autoValidateMode:
                                AutovalidateMode.always;
                                return 'Invalid mobile number';
                              }
                              return null; // No error if the validation passes
                            },
                            onChanged: (phone) {
                              if (phone.completeNumber.isEmpty) {
                                setState(() {
                                  isMobileNumberEmpty = true;
                                });
                              } else {
                                setState(() {
                                  isMobileNumberEmpty = false;
                                });
                              }
                            },
                            disableLengthCheck: false,
                            dropdownIconPosition: IconPosition.trailing,
                            keyboardType: TextInputType.number,
                            initialCountryCode: "IN",
                            flagsButtonPadding:
                                EdgeInsets.symmetric(vertical: 0.8.h),
                            flagsButtonMargin:
                                EdgeInsets.symmetric(horizontal: 5.w),
                            onCountryChanged: (phone) {
                              selectedCountryCode = "+${phone.dialCode}";
                              setState(() {});
                            },
                          ),
                        ),

When phone field is empty and I clicked on Submit button it should not gives me error message and user added successfully. I don't want to make phone field mandatory.

Answer 1

In your current code, you're using the validator function to check if the phone number is empty and returning an error message if it's not empty. However, this approach doesn't match your requirement of making the phone field optional.

To make the phone field optional, you can modify the validator function to check if the phone number is empty and only return an error if it's not empty and invalid. Here's the updated code for your validator function:

validator: (phone) {
  // Check if the field is empty and return null to skip validation
  if (phone.isEmpty) {
    return null;
  }
  // Implement your custom validation logic here for non-empty fields
  if (!yourCustomValidationLogic(phone)) {
    return 'Invalid mobile number';
  }
  return null; // No error if the validation passes
},

Replace yourCustomValidationLogic(phone) with your actual validation logic for non-empty phone numbers.

This modification ensures that the validator only displays an error when the phone field is not empty and fails your custom validation, allowing you to have an optional phone number field.