es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Validando un campo numérico con yup, utilizando un mensaje personalizado y verificando si el campo está vacío.

Validando un campo numérico con yup, utilizando un mensaje personalizado y verificando si el campo está vacío.

01 Aug, 2023 Programación

Estoy validando un campo que solo puede aceptar un número decimal positivo.
Mi esquema de Yup se ve de la siguiente manera:

yup.object().shape({
Duración: yup
.number()
.typeError(‘Ingrese una duración. El campo no puede quedar en blanco.’)
.positive(‘Debe ser un número positivo.’),
})

Como resultado,

  1. Cuando el usuario ingrese un número negativo (incluyendo 0), se mostrará el mensaje ‘Debe ser un número positivo’.
  2. Cuando el usuario deje el campo en blanco, se mostrará el mensaje ‘Ingrese una duración. El campo no puede quedar en blanco’.
  3. Sin embargo, cuando el usuario ingrese una cadena como ‘dos minutos’ u otra cadena, se mostrará el mensaje ‘Ingrese una duración. El campo no puede quedar en blanco’, lo cual no tiene sentido.

Podría cambiar el mensaje de typeError() por algo más genérico, pero me preguntaba si había una forma más completa de manejar el escenario.

Entonces, cuando el usuario ingrese

  1. una cadena, puedo mostrar el mensaje ‘Debe ser un tipo de número’ y,
  2. cuando el campo se deja en blanco, puedo mostrar el mensaje ‘Ingrese una duración. El campo no puede quedar en blanco’.
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr esto, puedes modificar el esquema Yup para incluir el método test() y crear una regla de validación personalizada. Aquí tienes un ejemplo de implementación:

    yup.object().shape({
  Duration: yup
    .number()
    .typeError('Por favor ingresa un número.')
    .positive('Debe ser un número positivo.')
    .test('is-decimal', 'Debe ser un número decimal.', value => {
      if (value === '') return true; // el campo es opcional
      return /^\d*\.?\d+$/.test(value);
    }),
})

    En este esquema actualizado:

    • El mensaje typeError() se ha actualizado para ser más genérico, ya que también se utilizará para cadenas de texto y otros tipos de entrada no numéricas.
    • El método test() verifica si la entrada es un número decimal utilizando una expresión regular (/^\d*\.?\d+$/). Si no lo es, se mostrará el mensaje de validación 'Debe ser un número decimal.'.
    • El método test() también verifica si el campo es opcional devolviendo true si el valor es una cadena de texto vacía ('').

    Al incluir esta regla de validación personalizada, el usuario ahora recibirá mensajes de error más específicos para los diferentes escenarios: número negativo, entrada no decimal y campo en blanco.

Comments are closed.