FormBuilder Validators #

Form Builder Validators provide a convenient way of validating data entered into any Flutter FormField. It provides common validation rules out of box (such as required, email, number, min, max, minLength, maxLength, date validations etc.) as well as a way to compose multiple validation rules into one FormFieldValidator.

Also included is the l10n / i18n of error text messages into multiple languages

Example #

import 'package:form_builder_validators/form_builder_validators.dart';

...

TextFormField(
  decoration: InputDecoration(labelText: 'Name'),
  validator: FormBuilderValidators.required(context),
),
TextFormField(
  decoration: InputDecoration(labelText: 'Age'),
  validator: FormBuilderValidators.compose([
    FormBuilderValidators.numeric(context, errorText: 'La edad debe ser numérica.'),
    FormBuilderValidators.max(context, 70),
    (val) {
      var number = double.tryParse(val ?? '');
      if (number != null) if (number < 0)
        return 'We cannot have a negative age';
      return null;
    }
  ]),
),

Built-in Validators #

This package comes with several most common FormFieldValidators such as required, numeric, mail, URL, min, max, minLength, maxLength, IP, credit card etc. with default errorText.

Available built-in validators include:

• FormBuilderValidators.creditCard() - requires the field's value to be a valid credit card number.
• FormBuilderValidators.date() - requires the field's value to be a valid date string.
• FormBuilderValidators.email() - requires the field's value to be a valid email address.
• FormBuilderValidators.equal() - requires the field's value be equal to provided object.
• FormBuilderValidators.integer() - requires the field's value to be an integer.
• FormBuilderValidators.ip() - requires the field's value to be a valid IP address.
• FormBuilderValidators.match() - requires the field's value to match the provided regex pattern.
• FormBuilderValidators.max() - requires the field's value to be less than or equal to the provided number.
• FormBuilderValidators.maxLength() - requires the length of the field's value to be less than or equal to the provided maximum length.
• FormBuilderValidators.min() - requires the field's value to be greater than or equal to the provided number.
• FormBuilderValidators.minLength() - requires the length of the field's value to be greater than or equal to the provided minimum length.
• FormBuilderValidators.numeric() - requires the field's value to be a valid number.
• FormBuilderValidators.required() - requires the field have a non-empty value.
• FormBuilderValidators.url() - requires the field's value to be a valid url.

Composing multiple validators #

FormBuilderValidators class comes with a very useful static function named compose() which takes any number of FormFieldValidator functions. This allows for reusability of validation rules across multiple fields.

On validation each validator is run and if any returns a non-null value (i.e. a String), validation fails and the errorText for the field is set as the returned string.

Validation example:

FormBuilderTextField(
  name: 'age',
  decoration: InputDecoration(labelText: 'Age'),
  validator: FormBuilderValidators.compose([
    FormBuilderValidators.numeric(context, errorText: 'La edad debe ser numérica.'),
    FormBuilderValidators.max(context, 70),
    (val){
      if(val < 0)
        return 'We cannot have a negative age';
      return null;
    }
  ]),
),

l10n #

To allow for localization of error messages within your app, add the FormBuilderLocalizations.delegate in the list of your app's localizationsDelegates

  return MaterialApp(
      supportedLocales: [
        Locale('en'),
        Locale('it'),
        Locale('fr'),
        Locale('es'),
      ],
      localizationsDelegates: [
        FormBuilderLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],

Languages supported #

• English (en)
• French (fr)
• German (de)
• Hungarian (hu)
• Italian (it)
• Japanese (ja)
• Polish (pl)
• Portuguese (pt)
• Slovak (sk)
• Spanish (es)

Support #

Issues and PRs #

Any kind of support in the form of reporting bugs, answering questions or PRs is always appreciated.

We especially welcome efforts to internationalize/localize the package by translating the default validation errorText strings for built-in validation rules.

Localizing messages #

1. With the app’s root directory as the current directory, generate l10n/intl_messages.arb from lib/localization/form_builder_localizations.dart:

   flutter pub pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/localization/form_builder_localizations.dart

2. The intl_messages.arb file is a JSON format map with one entry for each Intl.message() function defined in lib/localization/form_builder_localizations.dart. This file serves as a template for the different translations (for example intl_en.arb and intl_es.arb are English and Spanish translations respectively). You are therefore you are required to copy the intl_messages.arb and put the content in a new file with the name of your locale with a name with format intl_<locale>.arb (e.g. intl_fr.arb for French Translations).

3. Translate the messages in the new file to the required language.

4. With the app’s root directory as the current directory, generate intl_messages_<locale>.dart for your intl_<locale>.arb file and update intl_messages_all.dart, which imports all of the messages files:

flutter pub run intl_translation:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/localization/form_builder_localizations.dart lib/l10n/intl_<en>.arb lib/l10n/intl_messages.arb

e.g. To generate for French run: flutter pub run intl_translation:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/localization/form_builder_localizations.dart lib/l10n/intl_fr.arb lib/l10n/intl_messages.arb

• Alternatively you could run the following command to generate Dart translation files for all the intl_<locale>.arb files in the l10n/ directory:

flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/localization/form_builder_localizations.dart lib/l10n/intl_*.arb

5. Include your new language to FormBuilderLocalization's supported languages. Go to lib/localization/form_builder_localizations.dart and include the language like so:

@override
  bool isSupported(Locale locale) {
    return ['en', 'es', 'fr'].contains(locale.languageCode);
  }

6. Submit your PR and be of help to millions of people all over the world!

Coffee :-) #

If this package was helpful to you in delivering your project or you just wanna to support this package, a cup of coffee would be highly appreciated ;-)