Quiero validar todas mis entradas en react Mi código de validación se ve así:
let isValid = { name: false, address: false, postcode: false, phone: false, email: false }; const validateInput = (e) => { let currentInput = e.target if (currentInput.name === 'name') { if (currentInput.value !== 'undefined' && currentInput.value.match(/^[a-zA-Z]+$/)) { isValid.name = true; } else { isValid.name = false; } } if (currentInput.name === 'address') { if (currentInput.value !== 'undefined') { isValid.address = true; } else { isValid.address = false; } } if (currentInput.name === 'postcode') { if (currentInput.value !== undefined && currentInput.value.match(/^[0-9]+[-]+[0-9]+$/) && currentInput.value.length > 4) { isValid.postcode = true; } else { isValid.postcode = false; } } if (currentInput.name === 'phone') { if (currentInput.value !== 'undefined' && currentInput.value.match(/^[0-9]+$/) && currentInput.value.length > 7) { isValid.phone = true; } else { isValid.phone = false; } } if (currentInput.name === 'email') { if (currentInput.value !== 'undefined' && currentInput.value.match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) { isValid.email = true; } else { isValid.email = false; } } console.log(isValid) }Por ejemplo, cuando escribo el valor correcto en "Nombre", isValid.name obtiene el valor verdadero, luego, cuando escribo algo en "dirección", isValid.address se vuelve verdadero, pero isValid.name es falso. ¿Cómo solucionarlo?
{requiredInformations.map((el) => ( <> <Label>{el.label}</Label> <Input type={el.type} name={el.name} required onChange={(e) => { getInputValue(e); validateInput(e) }} /> </> ))}Le sugiero que intente usar la biblioteca react-joi para la validación React-Joi-Validation Es fácil y simple de usar, y puede lograr lo que está intentando aquí en su código simplemente leyendo la primera página en la página principal del paquete npm.
Debe familiarizarse con términos como "estado", "accesorios", "ciclo de vida del componente", etc. Cree un componente simple utilizando una guía en YouTube, puede encontrar muchos de ellos.
Mientras tanto, aquí hay un componente simple que valida las entradas:
function App() { const [name, setName] = React.useState(''); const [address, setAddress] = React.useState(''); const isValid = React.useMemo(() => { const result = { name: false, address: false, }; if (name.match(/^[a-zA-Z]+$/)) { result.name = true; } else { result.name = false; } if (address !== '') { result.address = true; } else { result.address = false; } return result; }, [name, address]); return ( <div> <input placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} /> {isValid.name ? <p>Name is valid</p> : <p>Name is invalid</p>} <br /> <input placeholder="Address" value={address} onChange={(e) => setAddress(e.target.value)} /> {isValid.address ? <p>Adress is valid</p> : <p>Adress is invalid</p>} </div> ); } ReactDOM.render(<App />, document.getElementById('root')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <div id="root"> </div>