Validating Form Data

In the previous chapter, we looked into building forms with Flutter Form Builder. When storing the data to the application state, we used a method saveAndValidate to make the form data available through the value property of the FormBuilderState object. The FormBuilderState is available through the key property given to the FormBuilder that is used to build the form.

As the name saveAndValidate implies, the method saves and validates the form. We did not discuss the validation part in the previous chapter, but it is possible to validate the form data before saving it to the application state. The saveAndValidate method returns a boolean value that indicates whether the form data is valid or not.

Flutter Form Builder provides a library of common validators called Form Builder Validators. The library contains validators for common form fields, such as email, URL, and required fields. After adding the depedency form_builder_validators to the project pubspec.yaml file, the validators can be used by importing the library.

To outline how validation works with form_builder_validators, we look into the following application that is used for submitting an email address through the form. The version below has no validation implemented and the _submit method is empty.

Validators are added to the form fields by first importing the form builder validators library and then adding them through the validator property of the form field. In addition, the form fields have a property autovalidateMode that can be set to AutovalidateMode.always to automatically run the validation rules on the form data and to show the validation errors.

The following example shows how to add a required field validator to the email field and to automatically validate the form data.

If we wish to have multiple validators for a form field, we can compose a set of validators using the FormBuilderValidators.compose method, which takes a list of validators as an argument.

The following example shows how to add a required field validator and an email validator to the email field.

Now, the email field first shows a validation error stating that the field cannot be empty. Then, once the user starts typing in content, the validation error changes to highlighting that the field requires a valid email address. Once the field has a valid email address, the validation error disappears.

In the example above, the form can still be submitted, even if there are validation errors.

To prevent the form from being submitted when there are validation errors, we can check the return value of the saveAndValidate method in the _submit method. If the method returns true, the form data is valid and can be saved to the application state. If the method returns false, the form data is not valid and the form should not be saved.

This could be done, for example, as follows. The exclamation mark ! is used to state that the currentState property is not null.

_submit() {
  if (_formKey.currentState!.saveAndValidate()) {
    // save the form data
  }
}