Run function on valid phone number

[saveKenny]

I want to enable/disable a Submit Button, based on the package validation.

Right now the IntlPhoneField supports onChange, onSubmit and onSaved functions, but does not support an onValid function.

How do I achieve that?

[CartmanGD]

Facing the same issue..

[saveKenny]

I solved this issue by extracting the current selected Country object, and use its minLength and maxLength parameters in order to detect its validity.

Checkout the full example that I posted on StackOverflow.

[saveKenny]

Also I consider to contribute this package by adding an onValid function (hopefully I will have time for that).

[saveKenny]

@vanshg395 @jgeewax @marcaureln Please accept my pull request, so others will enjoy this feature.

[tritao]

I added this to my fork, here is the patch in case anyone needs it.

From 5a75cc229fc5d72d7d7120d4a93102dc3a6f1172 Mon Sep 17 00:00:00 2001
From: Joao Matos <joao@tritao.eu>
Subject: [PATCH] Add a validation callback.

---
 lib/intl_phone_field.dart | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/lib/intl_phone_field.dart b/lib/intl_phone_field.dart
index 313e992..11cd4dd 100644
--- a/lib/intl_phone_field.dart
+++ b/lib/intl_phone_field.dart
@@ -172,6 +172,9 @@ class IntlPhoneField extends StatefulWidget {
   /// Autovalidate mode for text form field
   final AutovalidateMode? autovalidateMode;

+  /// Validation callback
+  final ValueChanged<bool>? onValid;
+
   /// Whether to show or hide country flag.
   ///
   /// Default value is `true`.
@@ -228,6 +231,7 @@ class IntlPhoneField extends StatefulWidget {
     this.dropdownTextStyle,
     this.onSubmitted,
     this.validator,
+    this.onValid,
     this.onChanged,
     this.countries,
     this.onCountryChanged,
@@ -365,12 +369,15 @@ class _IntlPhoneFieldState extends State<IntlPhoneField> {
         // validate here to take care of async validation
         var msg;
         if (widget.autovalidateMode != AutovalidateMode.disabled) {
-          msg = widget.disableLengthCheck ||
-                  value.length >= _selectedCountry.minLength &&
-                      value.length <= _selectedCountry.maxLength
+          var isValidLength = value.length >= _selectedCountry.minLength &&
+              value.length <= _selectedCountry.maxLength;
+          msg = widget.disableLengthCheck || isValidLength
               ? null
               : (widget.invalidNumberMessage ?? 'Invalid Mobile Number');
           msg ??= await widget.validator?.call(phoneNumber.completeNumber);
+          if (widget.onValid != null) {
+            widget.onValid!(msg == null);
+          }
           setState(() => validationMessage = msg);
         }
         widget.onChanged?.call(phoneNumber);

[CartmanGD]

IMO a better approach would be if the PhoneNumber object which provided in the onChange function, will support the isValidNumber getter. Then you could statement isValidNumber and do as you want.

[jimmyff]

I've created a PR that resolves this issue. My approach is to add a validates parameter to the onChanged callback:

 onChanged: (PhoneNumber phone, bool validates) {
   print('${phone.completeNumber} (validates: $validates)');
 }

https://github.com/vanshg395/intl_phone_field/pull/286

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 5 days. If you believe this issue is still relevant, please comment to keep it open. Thank you for your contributions.