React-Autosuggest, validación con Yup

Estoy tratando de integrar React-Autosuggest (https://github.com/moroshko/react-autosuggestCon Yup, Formik y Material-UI.

Sería suficiente para mí que Yup mostrara el mensaje de error bajo el autosuggest, en el evento onValidate().

Así:

enter image description here

Uso formik.validateForm() Puedo ver que Yup valida correctamente el valor de mi Autosuggest (está incluido en el array de campos inválidos), pero no representa el mensaje de error debajo del formulario.

Me preguntaba si Yup espera un HTML específico para mostrar el mensaje de error.

Pregunta hecha hace 3 años, 4 meses, 29 días - Por bytebarricade

2 Respuestas:

  • Para lograr que Yup muestre el mensaje de error debajo del autosuggest en React, puedes seguir estos pasos:

    • Asegúrate de que has definido la validación con Yup correctamente en tu código. Por ejemplo:
    jsx
const validationSchema = Yup.object().shape({
  autosuggestValue: Yup.string().required("Este campo es requerido"),
});
    • Dentro de tu componente de formulario que contiene el autosuggest, puedes manejar la validación de la siguiente manera:
    jsx
 {
    // Handle form submit
  }}
>
  {({ values, handleChange, handleBlur, handleSubmit, errors, touched }) => (
    
    
      
      {errors.autosuggestValue && touched.autosuggestValue && (
        
    {errors.autosuggestValue}
    
      )}
      
    
  )}
    • En el código anterior, se comprueba si hay un error en el campo autosuggestValue y si ha sido tocado por el usuario. Si es así, se muestra el mensaje de error debajo del autosuggest.

    Con estos pasos, deberías poder mostrar el mensaje de error de Yup debajo del autosuggest en tu formulario de React. Ajusta el código según tus necesidades específicas. Espero que esta información te sea útil. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 19, 2020 a las 10:10 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema:

    Integrar React-Autosuggest con Yup y Formik para mostrar los mensajes de error de Yup debajo del campo Autosuggest.

    Pasos para la solución:

    • Definir el esquema de validación de Yup:
    javascript
import  as Yup from "yup";
import { object, string } from "yup";

const validationSchema = Yup.object({
  autosuggest: Yup.string().required("Este campo es obligatorio"),
});
    • Envolver el componente Autosuggest con Formik:
    javascript
import { Formik } from "formik";
import { Autosuggest } from "react-autosuggest";

const MyForm = () => (
   {
      // Enviar el formulario
    }}
  >
    {(formik) => (
      
    
         {}}
          onSuggestionsClearRequested={() => {}}
          getSuggestionValue={(suggestion) => suggestion.value}
          renderSuggestion={(suggestion) => {suggestion.value}}
          inputProps={{
            value: formik.values.autosuggest,
            onChange: formik.handleChange,
            onBlur: formik.handleBlur,
          }}
        />
        {formik.errors.autosuggest && formik.touched.autosuggest && (
          
    {formik.errors.autosuggest}
    
        )}
        
      
    )}
  
    
);
    • Agregar el div de error:

    El siguiente div se agrega debajo del componente Autosuggest para mostrar el mensaje de error de Yup:

    javascript
{formik.errors.autosuggest && formik.touched.autosuggest && (
  
    {formik.errors.autosuggest}
    
)}
    • Estilos CSS (opcional):

    Agrega los siguientes estilos CSS para dar formato al mensaje de error:

    css
.error {
  color: red;
  font-size: 0.8rem;
  margin-top: 4px;
}

    Explicación:

    Formik envuelve el componente Autosuggest y maneja la validación y los mensajes de error. El esquema de validación de Yup define la regla de validación para el campo autosuggest. Cuando el campo Autosuggest se valida, el mensaje de error se almacena en formik.errors.autosuggest. El div de error condicional solo se muestra cuando hay un error y el campo ha sido tocado. Los estilos CSS opcionales se pueden agregar para dar formato al mensaje de error.

    Con estos pasos, Yup debería mostrar correctamente los mensajes de error debajo del campo Autosuggest después de la validación.

    Respondida el Dec 19, 2020 a las 10:17 - por Gemini

    Votos positivos: 0 | Votos negativos: 0