Validación — JS: Desarrollo web

• ¿Qué es la validación?
• Cómo comprobar la corrección de los datos

En el siguiente código, los datos de los usuarios se reciben y se guardan tal como están. Es decir, suponemos que los usuarios ingresan los datos correctamente:

app.post('/users', (req, res) => {
  const {
    name,
    email,
    password,
    passwordConfirmation,
  } = req.body;
  const user = {
    name,
    email,
    password,
  };

  state.users.push(user);

  res.redirect('/users');
});

En la práctica, esto no sucede. Los datos pueden estar incompletos, ser erróneos o no ser adecuados para nuestro sistema. En esta lección aprenderemos a manejar estos datos.

¿Qué es la validación?

Cuando recibimos datos de un usuario, debemos verificarlos. Esta verificación se llama validación. La validación incluye dos elementos principales:

• Verificar la corrección de los datos de entrada: por ejemplo, comprobar si los campos obligatorios están llenos o si la contraseña y su confirmación coinciden.
• Verificar la posibilidad de realizar la operación: por ejemplo, no podremos registrar a un nuevo usuario si intenta ingresar un correo electrónico asociado a una cuenta existente.

Cómo comprobar la corrección de los datos

Puedes verificar la corrección de una contraseña ingresada con una comparación simple:

const {
  password,
  passwordConfirmation,
} = req.body;

if (password !== passwordConfirmation) {
  // Hacemos algo si las contraseñas no coinciden
}

¿Qué hacer después? Sería lógico si mostramos el mismo formulario con dos importantes adiciones:

• Necesitas guardar los datos ingresados para que el usuario no tenga que llenar todos los campos nuevamente.
• Necesitas mostrar los mensajes de error, por ejemplo, en una lista encima del formulario.

Fastify tiene un mecanismo de validación de datos incorporado. Además, conectaremos la biblioteca yup, que simplificará la tarea:

npm i yup

Echemos un vistazo al código del controlador ya terminado y luego lo desglosaremos.

app.post('/users', {
  attachValidation: true,
  schema: {
    body: yup.object({
      name: yup.string().min(2, 'El nombre debe tener al menos dos caracteres'),
      email: yup.string().email(),
      password: yup.string().min(5),
      passwordConfirmation: yup.string().min(5),
    }),
  },
  validatorCompiler: ({ schema, method, url, httpPart }) => (data) => {
    if (data.password !== data.passwordConfirmation) {
      return {
        error: Error('La confirmación de contraseña no coincide con la contraseña'),
      };
    }
    try {
      const result = schema.validateSync(data);
      return { value: result };
    } catch (e) {
      return { error: e };
    }
  },
}, (req, res) => {
  const { name, email, password, passwordConfirmation } = req.body;

  if (req.validationError) {
    const data = {
      name, email, password, passwordConfirmation,
      error: req.validationError,
    };

    res.view('src/views/users/new', data);
    return;
  }

  const user = {
    name,
    email,
    password,
  };

  state.users.push(user);

  res.redirect('/users');
});

El segundo parámetro en el método post() recibe parámetros en forma de objeto. Para la validación, necesitamos tres propiedades en este objeto:

• attachValidation: este parámetro permite habilitar el controlador de solicitudes si los datos no son válidos. Por defecto, si la validación falla, la respuesta de error de validación se envía inmediatamente y nuestro controlador no se ejecuta. Pero no siempre es lo que se necesita. Por ejemplo, queremos mostrar los errores y renderizar el formulario de nuevo. Para eso, podemos poner este parámetro en true.

• schema: aquí definimos el esquema de los datos. Los datos se compararán con el esquema y si hay alguna discrepancia, la validación generará un error, cuyo texto se puede definir con un parámetro adicional. Por ejemplo, para verificar la longitud mínima del nombre se establece el texto 'El nombre debe tener al menos dos caracteres'. Si no defines un texto, yup mostrará su propio texto de error. En el ejemplo de arriba, especificamos los requisitos para el cuerpo de la solicitud (body). Debe contener varios campos. Para cada campo, describimos los requisitos con los métodos de yup. Por ejemplo, la contraseña debe ser una cadena y contener al menos cinco caracteres. La biblioteca yup contiene muchas herramientas diferentes para la validación, puedes familiarizarte con ellas en la documentación.

• validatorCompiler: aquí se forma la función de validación. En la propiedad, debemos especificar una función que a su vez devuelve la función de validación. En general, tan sólo debemos llamar al método de validación validateSync() y capturar los errores. La función de validación debe retornar un objeto. Si se encuentran errores, deben ponerse en la propiedad error. Además, podemos hacer cualquier revisión adicional. En el ejemplo de arriba, agregamos una verificación para el campo de confirmación de contraseña para verificar que su valor sea igual al campo de contraseña. Podemos tener cualquier otra comprobación aquí. Por ejemplo, podemos verificar si existe un usuario con los mismos datos y mucho más.

El siguiente paso es agregar la visualización del error al formulario:

html
  body
    if error
      p= error.message

    form(action = '/users', method = 'post')
      div
        label Nombre:
          input(type = 'text', name = 'name', value = name)
      div
        label Correo electrónico:
          input(type = 'email', name = 'email', value = email, required = true)
      div
        label Contraseña:
          input(type = 'password', name = 'password', value = password, required = true)
      div
        label Confirmación de la contraseña:
          input(type = 'password', name = 'passwordConfirmation', value = passwordConfirmation, required = true)
      input(type = 'submit', value = 'Registrar')

El framework te permite configurar la validación de manera flexible, crear varios esquemas y reutilizarlos en diferentes controladores, agregar validación común para todas las solicitudes. En esta lección, hemos revisado el uso básico, pero es suficiente para resolver las tareas principales.

Trabajo independiente

1. Realiza en tu computadora todos los pasos de la lección. Modifica el formulario para agregar un nuevo usuario y el controlador de manera que se realice la validación de los datos ingresados por el usuario.
2. Haz lo mismo para los cursos. Al agregar un nuevo curso, debe realizarse la validación del título y la descripción del curso. El título del curso no debe tener menos de 2 caracteres y la descripción debe contener al menos 10 caracteres.
3. Inicia la aplicación e intenta agregar nuevas entidades. Verifica que, al ingresar datos incorrectos, el formulario permanezca lleno y se muestren los mensajes de error.
4. Sube los cambios a GitHub.