0
225
Viewsno se puede modificar el estilo de los mensajes de error predeterminados en formularios en React
Tengo un formulario en un componente de la función React y quiero cambiar los estilos (color, color de fondo) de los mensajes de error que aparecen cuando el atributo requerido se establece en verdadero para un campo. Tengo una const formRef = React.useRef(); y lo uso para comprobar si puedo ir más lejos así:
if (formRef.current.reportValidity()) { // do stuff } 
¿Alguna sugerencia?
·
Juan Pablo Isaza
1 answers
Answer question0
Hasta donde yo sé, no puede diseñar este error de validación predeterminado desde html. Lo que hice hasta ahora fue deshabilitar la validación nativa y escuchar el cambio de entrada y, en caso de error, actualizar algún estado. Por ejemplo
const [inputValue, setInputValue] = useState<string>(''); const [errorMessage, setErrorMessage] = useState<string>(''): const MIN_LENGTH = 5; /* update input value */ const handleInputChange = (event) => { const value = event.target.value; /* clear error on change */ if (errorMessage !== '') { setErrorMessage(''); } } /* set error if needed on blur */ const handleInputBlur = () => { if (inputValue.length <= MIN_LENGTH) { setErrorMessage(`Username should have at least ${MIN_LENGTH} characters` } } return ( <div> <input onChange={handleInputChange} onBlur={handleInputBlur} value={inputValue} /> {errorMessage !== '' && <p>{errorMessage}</p> </div> )
·
Juan Pablo Isaza
Report
Answer question