Form Validations

Estimated reading: 8 minutes 20 views

FlutKit provides a comprehensive validation system designed for forms, inputs, file uploads, and interactive UI components. Validators can be used with CustomTextFormField, TextFormField, CustomDropdownFormField, CustomCheckbox, and FileUploadForm.

FlutKit supports:

  • Built-in validators
  • File validators
  • Combined validators
  • Real-time validation with success messages
  • Third-party validators (Form Builder Validators)

Built-in Validators

Standard Validators

These validators are optimized for common form validation scenarios.

ValidatorDescription
Validators.requiredField()Validates that the field is not empty
Validators.email()Validates email format
Validators.minLength()Enforces minimum character length
Validators.maxLength()Enforces maximum character length
Validators.numeric()Allows numeric values only
Validators.alphanumeric()Allows letters and numbers only
Validators.regex()Validates against a custom RegExp
Validators.phone()Validates basic phone number format
Validators.strongPassword()Requires uppercase, lowercase, number, and symbol
Validators.match()Ensures two values match
Validators.url()Validates URL format

File Validators

Used with FileUploadForm to validate uploaded files.

ValidatorDescription
Validators.fileRequired()Ensures a file is selected
Validators.fileExtension()Restricts allowed file extensions
Validators.fileSize()Limits file size

Basic Usage Examples

Required Field

Dart
CustomTextFormField(
  labelText: 'First Name',
  validator: (value) =>
      Validators.requiredField(value, context),
),

Email Validation (Combined)

Dart
CustomTextFormField(
  labelText: 'Email',
  validator: Validators.combineValidators([
    (value) => Validators.requiredField(value, context),
    (value) => Validators.email(value, context),
  ]),
),

Numeric Validation

Dart
CustomTextFormField(
  labelText: 'Age',
  keyboardType: TextInputType.number,
  validator: (value) =>
      Validators.numeric(value, context),
),

Combining Validators

FlutKit allows multiple validators to be chained using:

  • Validators.combineValidators() for text fields
  • Validators.combineFileValidators() for file inputs
Example: Username Validation
Dart
CustomTextFormField(
  labelText: 'Username',
  validator: Validators.combineValidators([
    (value) => Validators.requiredField(value, context),
    (value) => Validators.minLength(value, 5, context),
  ]),
),

Checkbox (Required)

Dart
CustomCheckbox(
  label: "I agree to terms and conditions",
  value: false,
  onChanged: (val) {},
  validator: (val) => Validators.requiredField(
    val == true ? 'checked' : null,
    context,
    customMessage:
        "You must agree to the terms & conditions",
  ),
),

Dropdown Required

Dart
CustomDropdownFormField<String>(
  validator: (value) =>
      Validators.requiredField(
        value,
        context,
        customMessage: 'Plan must be selected',
      ),
),

File Validation

Required + Extension Combined
Dart
FileUploadForm(
  validator: Validators.combineFileValidators([
    (files) =>
        Validators.fileRequired(files, context),
    (files) => Validators.fileExtension(
      files,
      ['pdf', 'jpg'],
      context,
    ),
  ]),
),

File Size Limit
Dart
FileUploadForm(
  validator: (files) =>
      Validators.fileSize(
        files,
        1,
        FileSizeUnit.mb,
        context,
      ),
),

Real-Time Validation with Success Message

FlutKit supports real-time validation feedback by providing a successMessage.

Basic Example
Dart
CustomTextFormField(
  labelText: 'Email',
  validator: Validators.combineValidators([
    (value) => Validators.requiredField(value, context),
    (value) => Validators.email(value, context),
  ]),
  successMessage: 'Email seems valid!',
),

Strong Password & Match Validation
Dart
CustomTextFormField(
  labelText: 'Password',
  isPassword: true,
  validator: Validators.combineValidators([
    (value) => Validators.requiredField(value, context),
    (value) =>
        Validators.strongPassword(value, context),
  ]),
  successMessage: 'Strong password!',
),

Dart
CustomTextFormField(
  labelText: 'Confirm Password',
  isPassword: true,
  validator: Validators.combineValidators([
    (value) => Validators.requiredField(value, context),
    (value) => Validators.match(
      value,
      _passwordController.text,
      context,
    ),
  ]),
  successMessage: 'Password match!',
),

Third-Party Validators (Form Builder Validators)

FlutKit fully supports form_builder_validators and integrates seamlessly with success messages.

Usage Example
Dart
// Required Field Validator
CustomTextFormField(
  labelText: 'First Name',
  hintText: 'Your First Name',
  suffixIcon: Icons.person_outline,
  validator: FormBuilderValidators.required(),
  successMessage: 'Looks Good!', // show success message
),   

// Email Validator
CustomTextFormField(
  labelText: 'Email',
  hintText: 'e.g. johndoe@example.com',
  suffixIcon: Icons.mail_outline,
  validator: FormBuilderValidators.email(),
  successMessage:
      'Email seems valid!', // show success message
),

// Username Validator
CustomTextFormField(
  labelText: 'Username',
  hintText: 'Min 5 chars',
  suffixIcon: Icons.person_outline,
  validator: FormBuilderValidators.username(
    minLength: 3,
    maxLength: 5,
    allowUnderscore: true,
  ),
  successMessage:
      'Perfect username!', // show success message
),      

// Minimum Length Validator
CustomTextFormField(
  labelText: 'Nickname',
  hintText: 'Max 10 chars',
  suffixIcon: Icons.person_outline,
  validator: FormBuilderValidators.minLength(
    3,
    checkNullOrEmpty: false,
  ),
  successMessage: 'Looks Good!', // show success message
),       

// Maximum Length Validator
CustomTextFormField(
  labelText: 'Nickname',
  hintText: 'Max 10 chars',
  suffixIcon: Icons.person_outline,
  validator: FormBuilderValidators.maxLength(
    10,
    checkNullOrEmpty: false,
  ),
  successMessage: 'Looks Good!', // show success message
), 

// Numeric Validator
CustomTextFormField(
  labelText: 'Age',
  hintText: 'Number only',
  suffixIcon: Icons.numbers_outlined,
  validator: FormBuilderValidators.numeric(
    checkNullOrEmpty: false,
  ),
  keyboardType: TextInputType.number,
  successMessage: 'Looks Good!', // show success message
),     

// Negative Number Validator
CustomTextFormField(
  labelText: 'Negative Number',
  hintText: 'Negative Number only',
  suffixIcon: Icons.pin_outlined,
  validator: FormBuilderValidators.negativeNumber(
    checkNullOrEmpty: false,
  ),
  successMessage: 'Looks Good!', // show success message
),  

// Negative Number Validator
CustomTextFormField(
  labelText: 'Code',
  hintText: 'Alphanumeric only',
  suffixIcon: Icons.pin_outlined,
  validator: FormBuilderValidators.integer(
    checkNullOrEmpty: false,
  ),
  successMessage: 'Looks Good!', // show success message
), 

// Phone Validator
CustomTextFormField(
  labelText: 'Phone Number',
  hintText: 'e.g. +123456789012345 or 123456789012345',
  validator: FormBuilderValidators.phoneNumber(
    checkNullOrEmpty: false,
  ),
  suffixIcon: Icons.call_outlined,
  keyboardType: TextInputType.number,
  successMessage: 'Looks Good!', // show success message
),


//Dropdown Field
CustomDropdownFormField<String>(
  hint: Text(
    'Select a Plan',
    style: TextStyle(
      fontSize: kBodyMedium,
    ),
  ),
  items: [
    DropdownMenuItem(
      value: "basic",
      child: Text("Basic Plan"),
    ),
    DropdownMenuItem(
      value: "pro",
      child: Text("Pro Plan"),
    ),
    DropdownMenuItem(
      value: "enterprise",
      child: Text("Enterprise Plan"),
    ),
  ],
  initialValue: null,
  validator: FormBuilderValidators.phoneNumber(),
  // successMessage: 'Looks Good!', // show success message
  successMessage:
      'Perfect Choice!', // custom succes message
),

// Strong Password Validator
CustomTextFormField(
  labelText: 'Input Password',
  hintText: 'Use a strong password',
  isPassword: true,
  controller: _passwordController,
  validator: FormBuilderValidators
      .password(), // Strong password validator
  successMessage:
      'Your password is strong!', // show success message
),

// URL Validator
CustomTextFormField(
  labelText: 'Website URL',
  hintText: 'e.g. flutter.com',
  suffixIcon: Icons.language_outlined,
  validator: FormBuilderValidators.url(
    checkNullOrEmpty: false,
  ),
  successMessage: 'Looks Good!', // show success message
),

// Credit Card Validator
CustomTextFormField(
  labelText: 'Credit Card',
  hintText: 'e.g. 378282246310005',
  suffixIcon: Icons.credit_card_outlined,
  validator: FormBuilderValidators.creditCard(
    checkNullOrEmpty: false,
  ),
  successMessage: 'Looks Good!', // show success message
),

// Required Validator
FileUploadForm(
  validator: FormBuilderValidators.required(),
  successMessage: 'Looks Good!',
),

// Text Area with Required Field Validator
CustomTextFormField(
hintText: "Type your message...",
minLines: 6,
maxLines: 6,
validator: FormBuilderValidators.required(),
successMessage: 'Looks Good', // show success message
),

Best Practices

  • Use built-in validators for consistent localization and UX
  • Combine validators instead of creating custom logic
  • Enable successMessage for better user feedback
  • Use Form Builder Validators for complex validation rules
  • Avoid validating on submit only; prefer real-time validation

Demo

You can preview all validation types and behaviors in the FlutKit demo application.

Forms → Validations

Share this Doc

Form Validations

Or copy link

CONTENTS