Update button in Form submitted for wrong entries

Question

I have implementing app in that I fill the form and when there are error messages in the form. Form still submit to successfully.

so I wanted now, my update button will disable with grey color till I entered correct values to it. once I fill correct values it will enable with blue color.

how do I do that? I have shared my code what I am doing please check. I am using Block Pattern

  @override
 Widget build(BuildContext context) {
 return BlocConsumer<UpdateProfileBloc, UpdateProfileState>(
  listener: (context, state) async {
    if (state is UpdateProfileSuccessState) {
      showSnackBar(
          isSuccess: true, msg: "Successfully updated", context: context);
      final res = await UserServices.getUser();
      res.fold(
          (l) => showSnackBar(
              isSuccess: false, msg: 'Failed to update', context: context),
          (r) => {
                UserServices.user = r,
              });
      setState(() {
        isUpdated = true;
      });
    }
    if (state is UpdateProfileErrorState) {
      showSnackBar(
          isSuccess: false,
          msg: state.message.toString(),
          context: context);
    }
    if (state is UpdateProfileImageSuccess ||
        state is UpdateProfileVideoSuccess) {
      if (state is UpdateProfileImageSuccess) {
        profileImage = state.url;
        BlocProvider.of<UpdateProfileBloc>(context, listen: false)
            .add(UpdateProfile(data: {
          'profile_photo_path': profileImage,
        }));
      }
      if (state is UpdateProfileVideoSuccess) {
        personalExplantoryVideo = state.url;
        BlocProvider.of<UpdateProfileBloc>(context, listen: false)
            .add(UpdateProfile(data: {
          'video': personalExplantoryVideo,
        }));
      }
      setState(() {});
    }
  }, 

And this is my button code:

       CancelRegButton(
                onTap: () {
                  Map<String, dynamic> user = {
                    "name": _nameController.text,
                    'whatsapp_contact': _whatsapp.text,
                    'whatsapp_status': isWhatsAppOnly ? 1 : 0,
                    'city_id': cityStateModel!.id,
                    "state_id": cityStateModel!.stateId,
                    "country_id": cityStateModel!.countryId,
                    "email": _emailController.text,
                    'homevisit': homeVisit ? "1" : "0",
                    "address": _addressController.text,
                    "open_for_work": isWillingToWork ? 1 : 0,
                    "gender": selectedGender != -1
                        ? genders[selectedGender]
                        : null,
                    "contact": _mobileController.text,
                    "birthday": _ageController.text != ''
                        ? getBirthDateFromAge(
                                int.parse(_ageController.text))
                            .toString()
                        : '',
                  };
                  if (isWillingToWork) {
                    user['skills'] = skills;
                  }

                  BlocProvider.of<UpdateProfileBloc>(context, listen: false)
                      .add(UpdateProfile(data: user));
                },
                text: 'Update',
              ),

Any help Can be appreciated. so please help me with this.

Answer 1

Need to use formkey for checking whether the form is valid or not.

onTap: () {
    if (formKey.currentState!.validate(){
       //.. do submit
    }