intl_phone_field
intl_phone_field copied to clipboard
vanshg395
validation is not working properly
validation not working properly. when i try to call validate funtion without enter any input it doen't call the validator method.
facing same issue with this code version intl_phone_field: ^3.2.0 ----- view ------
IntlPhoneField(
controller: provider.phoneController,
showCountryFlag: false,
showDropdownIcon: true,
pickerDialogStyle: PickerDialogStyle(
countryNameStyle: AppTheme.instance.textFieldStyle.copyWith(color: Colors.black),
countryCodeStyle: AppTheme.instance.textFieldStyle.copyWith(color: Colors.black),
),
onCountryChanged: (country) => provider.setCountry(country),
style: AppTheme.instance.textFieldStyle.copyWith(color: Colors.black),
textInputAction: TextInputAction.next,
dropdownTextStyle: AppTheme.instance.textFieldStyle.copyWith(color: Colors.black),
keyboardType: TextInputType.number,
decoration: _decoration,
initialCountryCode: controller.initialCountryCode,
onChanged: (phone) {
// provider.setCountry(phone);
debugPrint(phone.completeNumber);
},
)
--------
on button click
if (phoneController.text.isNotEmpty && !(formKey.currentState?.validate() ?? false)) {
AppUtils.showErrorSnackBar(phoneValidation);
return;
}
selected country AF
+93 9685111112
10 /9
sometime validate sometime not
@Anandh2708 @naumanahmed19 I am also facing same issue. i manage to display error message somehow but i am not able to change border to red Row( children: [ Expanded( child: Column( crossAxisAlignment:CrossAxisAlignment.start, children: [ IntlPhoneField( controller: _mobileNumberController, decoration: InputDecoration( alignLabelWithHint: true, contentPadding: EdgeInsets.symmetric( vertical: 2.h, horizontal: 2.w), suffixIcon: displayMobileNumberNotRegisteredLogo != null && displayMobileNumberNotRegisteredLogo != false ? const Icon(Icons.verified, color: Colors.green) : displayMobileNumberRegisteredLogo == true ? const Icon(Icons.close_rounded,color: Colors.red) : const Icon(Icons.verified, color: Colors.transparent), labelText: "Mobile number*", filled: true, fillColor: ColorConstants.white, border: OutlineInputBorder( borderSide: const BorderSide(color: ColorConstants.textFormBorder), borderRadius: BorderRadius.circular(1.w), ), errorBorder: OutlineInputBorder( borderSide: const BorderSide(color: ColorConstants.errorInputBorderColor), borderRadius: BorderRadius.circular(1.w), ), focusedErrorBorder: OutlineInputBorder( borderSide: const BorderSide( color: ColorConstants.errorInputBorderColor), borderRadius:BorderRadius.circular(1.w), ), errorStyle: (screenWidth > 600)? TabErrorInputTextStyleforLogin() : ErrorInputTextStyleforLogin(), counter: const Offstage(), labelStyle: (screenWidth > 600) ? TabSignUpLabelStyle() : SignUpLabelStyle(), ), validator: (value) { if (_mobileNumberController.text.isEmpty) { _scrollToError(); return "Enter mobile number"; } return null; }, inputFormatters: [ FilteringTextInputFormatter.digitsOnly], autovalidateMode: _mobileNumberController.text != "" ? AutovalidateMode.always: AutovalidateMode.disabled, onChanged: (phone) { if (phone.number != '') { validationMessage = ""; setState(() {}); return; } }, dropdownIconPosition: IconPosition.trailing, keyboardType: TextInputType.number, flagsButtonPadding: EdgeInsets.symmetric(vertical: 0.8.h), flagsButtonMargin: EdgeInsets.symmetric(horizontal: 5.w), initialCountryCode: "IN", onCountryChanged: (phone) { selectedCountryCode = "+${phone.dialCode}"; setState(() {}); }, style: (screenWidth > 600) ? TabSignUpTextFieldStyle() : SignUpTextFieldStyle(), ), if (validationMessage != "") Padding( padding: EdgeInsets.only(top: 2.0, left: 15.0, bottom: 10.0), child: Text(validationMessage, style: ErrorInputTextStyleforLogin())) ], ), ) ], ), and my form submission button onButtonPressed: () async { enteredMobileNumber = "$selectedCountryCode ${_mobileNumberController.text.trim()}"; if (_mobileNumberController.text.isEmpty) { setState(() { validationMessage = "Enter mobile number"; }); } else { validationMessage = ""; } you resolve this issue ?
