---
title: "✅ Validar datos: TextField e formularios"
description: "## ✅ Comprobar antes de gardar **Validar** significa comprobar que un dato é correcto antes de utilizalo. Por exemplo, se pedimos o nome dun alumno, debemos comprobar que escribiu algo. Non queremos aceptar un campo baleiro nin un nome formado…"
url: "https://www.drodicio.com/docs/flutter/tema-5-navegacion/formularios/"
updated: "2026-10-12"
category: Tema 5. Interaccion, formularios e navegacion
---

# ✅ Validar datos: TextField e formularios

## ✅ Comprobar antes de gardar

**Validar** significa comprobar que un dato é correcto antes de utilizalo.

Por exemplo, se pedimos o nome dun alumno, debemos comprobar que escribiu algo. Non queremos aceptar un campo baleiro nin un nome formado unicamente por espazos.

En Flutter podemos facer esta comprobación de dúas maneiras:

- **Cun `TextField`:** comprobamos nós mesmos o texto cando o usuario preme o botón «Gardar».
- **Cun formulario (`Form`):** utilizamos campos `TextFormField` que permiten definir as súas propias regras de validación.

Imos ver as dúas posibilidades.

## ✍️ Validar un `TextField` directamente

Un `TextField` non comproba automaticamente se o texto introducido é correcto. Para facelo, podemos utilizar un `if` no método que se executa ao premer o botón «Gardar».

O proceso será o seguinte:

1. Lemos o texto utilizando `_controlador.text`.
2. Eliminamos os espazos dos extremos con `trim()`.
3. Se o texto está baleiro, mostramos unha mensaxe de erro e non continuamos.
4. Se é correcto, retiramos o erro anterior e mostramos o nome gardado.

### ⚠️ Como mostramos o erro?

Podemos utilizar a propiedade **`errorText`** de `InputDecoration` para mostrar unha mensaxe de erro debaixo do campo.

Esta propiedade pode recibir un texto ou `null`:

- Se recibe un **texto**, mostra esa mensaxe baixo o campo.
- Se recibe **`null`**, non mostra ningún erro.

Para controlar esta mensaxe utilizaremos unha variable:

```dart
String? _erro;
```

O símbolo `?` indica que a variable pode conter un texto (`String`) ou `null`. Inicialmente vale `null`, porque aínda non se produciu ningún erro.

Cando detectemos un erro, gardaremos a mensaxe nesta variable e utilizaremos `setState()` para actualizar a pantalla.

![Campo de nome e aviso de erro cando está baleiro](https://www.drodicio.com/wp-content/uploads/2026/10/validar1.png)
Campo de nome e aviso de erro cando está baleiro

### 🧪 Exemplo con comprobación manual

> 🔗 DartPad:
>
>
>
> - [`https://dartpad.dev/?id=0c08a69b22b041554e404ca62a3eceb3`](https://dartpad.dev/?id=0c08a69b22b041554e404ca62a3eceb3).

[https://dartpad.dev/embed-inline.html?id=0c08a69b22b041554e404ca62a3eceb3](https://dartpad.dev/embed-inline.html?id=0c08a69b22b041554e404ca62a3eceb3)

![Validación manual dun TextField mediante errorText](https://www.drodicio.com/wp-content/uploads/2026/10/validar_exemplo1-scaled.png)
Validación manual dun TextField mediante errorText

### 🔍 Que sucede ao premer «Gardar»?

O método `_gardar()` comeza lendo o texto e eliminando os espazos dos extremos:

```dart
final nome = _controlador.text.trim();
```

A continuación, comprobamos se quedou baleiro:

```dart
if (nome.isEmpty) {
  setState(() {
    _erro = 'Escribe o nome';
    _mensaxe = '';
  });
  return;
}
```

Se o nome está baleiro, mostramos o erro e limpamos a mensaxe anterior.

A instrución **`return` fai que o método remate inmediatamente**. Polo tanto, non se executa o código que aparece despois e non gardamos un dato incorrecto.

Se o nome non está baleiro, continuamos:

```dart
setState(() {
  _erro = null;
  _mensaxe = 'Nome gardado: $nome';
});
```

Neste caso, retiramos calquera erro anterior e mostramos o nome introducido.

> 💡 O erro só se comproba ao premer «Gardar». Se corriximos o texto, debemos volver premer o botón para que desapareza o aviso. Lembra que `errorText` só mostra a mensaxe: **non valida o texto por si mesmo**.

Tamén poderiamos mostrar o erro mediante unha `SnackBar`, como vimos no Tema 3.4. Neste exemplo utilizamos `errorText` porque permite identificar facilmente o campo que debemos corrixir.

## 📝 Validar cun formulario

Cando unha pantalla ten varios campos, comprobar cada un manualmente pode resultar pouco práctico.

Para facilitar este traballo, Flutter proporciona dous widgets:

- **`Form`:** agrupa os campos dun formulario e permite comprobar todos os seus datos.
- **`TextFormField`:** é semellante a `TextField`, pero incorpora unha propiedade chamada `validator` para comprobar o texto introducido.

Por exemplo, nun formulario de rexistro poderiamos ter un campo para o nome, outro para o correo electrónico e outro para o contrasinal. Cada campo tería as súas propias regras de validación.

Ao premer «Gardar», poderiamos comprobar todos os campos dunha soa vez.

Comezaremos cun exemplo sinxelo que só ten un campo.

### 🗝️ Como conectamos o botón co formulario?

Para comprobar os datos dun formulario cando prememos un botón, necesitamos poder acceder a ese formulario desde o código.

Para iso utilizamos unha **chave (`GlobalKey`)**.

Primeiro creamos a chave como atributo da clase `State`:

```dart
final _chave = GlobalKey<FormState>();
```

Despois asignámoslla ao formulario mediante a propiedade `key`:

```dart
Form(
  key: _chave,
  child: Column(
    // Campos do formulario.
  ),
)
```

Deste xeito, podemos utilizar a chave para pedir ao formulario que comprobe os seus campos:

```dart
_chave.currentState!.validate()
```

O método **`validate()`** executa as comprobacións dos campos do formulario e devolve:

- **`true`:** se todos os campos son correctos.
- **`false`:** se algún campo contén un erro.

> 💡 Polo momento, non necesitamos comprender todos os detalles de `GlobalKey`, `FormState` ou do operador `!`. Abonda con saber que esta instrución nos permite comprobar os campos do formulario.

### 🔎 Como definimos as regras de validación?

Cada `TextFormField` pode ter unha función **`validator`**, encargada de comprobar se o texto introducido é correcto.

Por exemplo:

```dart
validator: (valor) {
  if (valor == null || valor.trim().isEmpty) {
    return 'Escribe o nome';
  }
  return null;
},
```

Cando executamos `validate()`, Flutter chama automaticamente á función `validator` de cada campo.

Esta función recibe o texto do campo na variable `valor` e comproba dúas condicións:

- `valor == null`: comproba se non hai ningún valor.
- `valor.trim().isEmpty`: comproba se o texto está baleiro ou só contén espazos.

O operador `||` significa **OU**. Polo tanto, abonda con que se cumpra unha das dúas condicións para considerar que o dato non é válido.

A función `validator` debe devolver:

- **Unha mensaxe de erro** se o dato non é correcto. Flutter mostraraa automaticamente debaixo do campo.
- **`null`** se o dato é correcto e non existe ningún erro.

> 💡 Non confundas `validator` con `validate()`: a función `validator` devolve unha mensaxe ou `null` para un campo, mentres que `validate()` devolve `true` ou `false` para indicar se todos os campos do formulario son válidos.

### 🧪 Exemplo con `Form` e `TextFormField`

Neste caso, utilizaremos un formulario para comprobar que o usuario introduce un nome.

> 🔗 DartPad:
>
>
>
> - [`https://dartpad.dev/?id=c4ae1e720901fd67864c1323c45d455b`](https://dartpad.dev/?id=c4ae1e720901fd67864c1323c45d455b).

[https://dartpad.dev/embed-inline.html?id=c4ae1e720901fd67864c1323c45d455b](https://dartpad.dev/embed-inline.html?id=c4ae1e720901fd67864c1323c45d455b)

![Validación do nome con Form e TextFormField](https://www.drodicio.com/wp-content/uploads/2026/10/validar_exemplo2-scaled.png)
Validación do nome con Form e TextFormField

### 🔍 Que sucede ao premer «Gardar»?

Cando prememos o botón, executamos o método `_gardar()`:

```dart
void _gardar() {
  if (_chave.currentState!.validate()) {
    setState(() {
      _mensaxe = 'Nome gardado: ${_controlador.text.trim()}';
    });
  } else {
    setState(() {
      _mensaxe = ''; // Retiramos a confirmación anterior se agora hai un erro.
    });
  }
}
```

O funcionamento é o seguinte:

1. Executamos `validate()` para comprobar os campos do formulario.
2. Flutter executa a función `validator` do campo do nome.
3. Se o nome está baleiro, aparece a mensaxe de erro baixo o campo e `validate()` devolve `false`. O bloque `else` limpa a mensaxe de gardado anterior.
4. Se o nome é correcto, `validate()` devolve `true` e entramos no `if` para mostrar o nome gardado.

**A principal vantaxe é que non necesitamos crear unha variable `_erro` nin utilizar `errorText`.** O propio `TextFormField` encárgase de mostrar a mensaxe devolta polo seu `validator`.

Ademais, cando volvemos validar o formulario cun nome correcto, o erro anterior desaparece.

## ⚖️ Cal escollemos?

As dúas opcións permiten comprobar os datos antes de utilizalos. A diferenza está na maneira de organizar as comprobacións e mostrar os erros.

| Comprobación manual con `TextField` | Formulario con `TextFormField` |
| --- | --- |
| Comprobamos o texto no método `_gardar`. | Cada campo ten a súa función `validator`. |
| Gardamos o erro nunha variable e utilizamos `errorText` para mostralo. | O propio campo mostra a mensaxe devolta polo seu `validator`. |
| Utilizamos un `if` para decidir se continuamos. | `validate()` comproba os campos e indica se todos son válidos. |

Para unha comprobación pequena, **`TextField` cun `if` pode ser suficiente**. Cando temos varios campos con diferentes regras, **`Form` facilita a organización das validacións**.

> 💡 En ambos os casos, o importante é comprobar que os datos son correctos antes de utilizalos. Nos seguintes exemplos empregaremos principalmente `Form` e `TextFormField`.

### 🧪 Comproba o funcionamento

Executa os dous programas e realiza estas probas:

1. Preme «Gardar» sen escribir nada. Debe aparecer unha mensaxe de erro.
2. Escribe varios espazos e volve premer «Gardar». O erro debe continuar aparecendo.
3. Escribe «Iria» e preme «Gardar». O erro debe desaparecer e debe mostrarse o nome gardado.

Lembra que nestes exemplos **«gardar» só significa mostrar o dato na pantalla**. Non estamos almacenando información nun ficheiro nin nun servidor, polo que o nome non se conserva ao reiniciar a aplicación.

No Tema 3.7 veremos un exemplo con varios campos, validación de números e comprobacións mentres o usuario escribe.

> 📚 Consulta:
>
>
>
> - [TextField → `https://api.flutter.dev/flutter/material/TextField-class.html`](https://api.flutter.dev/flutter/material/TextField-class.html).
> - [Validación de formularios en Flutter → `https://docs.flutter.dev/cookbook/forms/validation`](https://docs.flutter.dev/cookbook/forms/validation).