Question 167777 in Flutter Question posted in
The official Flutter documentation can be found here.

Why Regex expression not working in flutter as expected

In my app i validate form for age phone email and many more field and i am trying to validate all this field. but unable to do so
I have regex expression for phone textformfield. I cant use inputFormatters for this as I have custom textformfield.

I want my what’s app field should contain only 10 digit number and avoid all special characters and space.

how do I solve this problem?

here is my code:

    TextFormFieldCustom(                                
                                  hintText: "Mobile Number",
                                  enable: _mobileController.text.isEmpty,
                                  controller: _mobileController,
                                  keyboardType: TextInputType.number,
                                  inputTextFormatter: [
                                    
 FilteringTextInputFormatter.digitsOnly 
                                  ],
                                  validator: (value) {
                                    if (!isValidMobile(value!)) {
                                      return 'Please enter your correct mobile number';
                                    }
                                    return null;
                                  },
                                ),

this is my custom textfield which is i used for many areas in app:

class TextFormFieldCustom extends StatefulWidget {
  final String hintText;
  final String? labelText;
  final List<TextInputFormatter>? inputTextFormatter;
  final TextEditingController? controller;
  final Widget? prefixIcon;
  final String? Function(String?)? validator;
  final Function(String?)? onChanged;
  final TextInputType? keyboardType;
  final Function(String?)? onSubmitted;
  final int? maxLines;
  final int? lenth;
  final bool enable;
  final double height;
  final Color? color;
  const TextFormFieldCustom({
    Key? key,
    required this.hintText,
    this.labelText,
    this.controller,
    this.prefixIcon,
    this.height = 65,
    this.validator,
    this.onChanged,
    this.keyboardType,
    this.onSubmitted,
    this.lenth,
    this.maxLines = 1,
    this.enable = true,
    this.color, this.inputTextFormatter,
  }) : super(key: key);

  @override
  State<TextFormFieldCustom> createState() => _TextFormFieldCustomState();
}

class _TextFormFieldCustomState extends State<TextFormFieldCustom> {
  bool isValid = false;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: widget.height.h,
      child: TextFormField(
        controller: widget.controller,
        validator: (value) {
          String? valid;
          if (widget.validator != null) {
            valid = widget.validator!(value);
          }
          if (valid == null && value!.isNotEmpty) {
            setState(() {
              isValid = true;
            });
          } else {
            setState(() {
              isValid = false;
            });
          }
          return valid;
        },
        onChanged: widget.onChanged,
        maxLines: widget.maxLines,
        maxLength: widget.lenth,
        keyboardType: widget.keyboardType,
        inputFormatters: [FilteringTextInputFormatter.singleLineFormatter,],
        onFieldSubmitted: (String value) {
          //for hiding keyboard
          //FocusScope.of(context).requestFocus(FocusNode());

          if (widget.onSubmitted != null) {
            widget.onSubmitted!(value);
          }
        },
        style: TextStyle(
          color: Colors.black,
          fontSize: 14.sp,
          fontWeight: FontWeight.w500,
        ),
        autofocus: false,
        autocorrect: true,
        enabled: widget.enable,
        autovalidateMode: AutovalidateMode.disabled,
        decoration: InputDecoration(
          filled: true,
          fillColor: widget.color ?? CustomColors.peachColor,
          hintText: widget.hintText,
          labelText: widget.labelText,
          hintStyle: TextStyle(
            color: CustomColors.greyFont,
            fontSize: 14.sp,
            fontWeight: FontWeight.w500,
          ),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10.r),
            borderSide: BorderSide.none,
          ),
          contentPadding:
              EdgeInsets.symmetric(horizontal: 20.w, vertical: 10.h),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10.r),
            borderSide: const BorderSide(color: Colors.black),
          ),
          prefixIcon: widget.prefixIcon,
          suffixIcon: isValid
              ? const Icon(Icons.check_circle, color: Colors.green)
              : null,
        ),
      ),
    );
  }
}

this is happening in my app:

Tags:

3

Answers


  1. 0

    Simply add the inputFormatters parameter to TextFormField.

    import 'package:flutter/services.dart'; 
import 'dart:io';

TextFormField(
      controller: mobileController, // textfield controller
      keyboardType: Platform.isIOS
          ? const TextInputType.numberWithOptions(signed: true)
          : TextInputType.phone,
      inputFormatters: [
        FilteringTextInputFormatter.allow(RegExp("[0-9]")), // or FilteringTextInputFormatter.digitsOnly
      ],
      formValidator: (value) {
          //...your validation
      },
    )

    For an open numeric (Dial) keyboard.

    keyboardType: Platform.isIOS
          ? const TextInputType.numberWithOptions(signed: true)
          : TextInputType.phone,

    If you have custom Textfield Widget then used below snippet

    class AppTextField extends StatelessWidget {
//... other parameter
final List<TextInputFormatter>? inputTextFormatter;
final TextInputType? keyboardType;

const AppTextField({
    Key? key,
    //... other parameter
    this.inputTextFormatter,
    this.keyboardType,
 }) : super(key: key);

@override
  Widget build(BuildContext context) {
    return TextFormField(
    inputFormatters: inputTextFormatter ??
          [FilteringTextInputFormatter.singleLineFormatter],
    keyboardType: keyboardType ?? TextInputType.emailAddress,
    );
  }
}

    Here, is how to call it.

    AppTextField(
/// ... other parameter
keyboardType: isIOS
          ? const TextInputType.numberWithOptions(signed: true)
          : TextInputType.phone,
      inputTextFormatter: [
        FilteringTextInputFormatter.allow(RegExp("[0-9]")), // or FilteringTextInputFormatter.digitsOnly
      ],
 );
    Login or Signup to reply.
  2. 0

    Use https://dartpad.dev/?id=0ef68e8905ca3277049e23ba3e1645e7

    bool isValidMobile(String mobile) {
    if (mobile.length > 10) {
        mobile = mobile.substring(3);
      }
    String patttern = r'([0-9]{10}$)';
    RegExp regExp = new RegExp(patttern);
    if (mobile.length == 0 || mobile.length != 10) {
          return false;
    }
    else if (!regExp.hasMatch(mobile)) {
          return false;
    }
    return true;
}
    Login or Signup to reply.
  3. 0

    I cant use inputFormatters for this as I have custom textformfield.

    it accept space and all special characters

    Both not possible at a time. Either you have to use textfield which accept inputFormatters OR you can just put validation and display message.

    The solution pasted above should work fine for second case.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search