Search code examples
formsflutterinputdarttrim

Trim() input value of any TextField in a Form by default in flutter app


I have different form fields and I want to trim each value of the form field by default before the validator method gets fired.

The reason I want to achieve this is because if I run a regex on an Input value when the validator method gets fired, the regex will return false on input_text.hasMatch because of a useless space character at the end of the input value.

For example. The code below on alphaNumericText.hasMatch(val) will return false because of a useless extra space character(s) at the end of the input value.

final alphaNumericText = RegExp(r'^[a-zA-Z0-9]+$');

TextFormField(
                  keyboardType: TextInputType.text,
                  decoration: new InputDecoration(
                    labelText: 'Enter your nickname',
                  ),
                  validator: (val) {
                    if (val.isEmpty == true) {
                      return 'Nickname is required!';
                    }
                    if (alphaNumericText.hasMatch(val) == false) {
                      return 'Use alphanumeric characters only in nickname.';
                    }
                    return null;
                  },
                  onSaved: (val) => this.nickname = val,
                ),

Note I do not want to achieve this by modifying the alphaNumericText RegExp to entertain extra spaces at the end of input value. I do not want to achieve this in this way.

What I want is every value in all TextFields in a form to be validated by default before the validator method is called.


Solution

  • just add

    inputFormatters: [WhitelistingTextInputFormatter(RegExp(r'[a-zA-Z0-9]'))],
    

    as property to TextInputField and user will not even able to type space or any other chars except whitelisted and you can remove also additional checks from validator

    full example

    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: SafeArea(
              child: Center(
                child: TextFormField(
                  inputFormatters: [WhitelistingTextInputFormatter(RegExp(r'[a-zA-Z0-9]'))],
                  keyboardType: TextInputType.text,
                  decoration: new InputDecoration(
                    labelText: 'Enter your nickname',
                  ),
                  validator: (val) {
                    if (val.isEmpty == true) {
                      return 'Nickname is required!';
                    }
                    return null;
                  },
                  onSaved: (val) {},
                ),
              ),
            ),
          ),
        );
      }
    }