He estado investigando esto durante una hora y no parece que haya muchos ejemplos de esto en Internet. Estoy tratando de validar los campos de entrada para que se llenen todos los campos, de lo contrario habrá un error. La cantidad de caracteres no importa, solo necesita completar las entradas.
Así que aquí está mi objeto de estado
constructor(props) { super(props); this.state = { firstName: '', lastName: '', ..., }; }Y aquí están los campos de texto de la interfaz de usuario del material.
<TextField className={classes.formInput} name="firstName" onChange={e => this.handleChange(e.target.value)} required id="" type="text" InputLabelProps={{ shrink: true, }} error={!firstName} helperText="Name is required" label="First Name" variant="standard" /> <TextField className={classes.formInput} name="lastName" onChange={e => this.handleChange(e.target.value)} required id="" type="text" InputLabelProps={{ shrink: true, }} label="Last Name" variant="standard" />Y aquí está el controlador onchange
handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }); }Lo más probable es que desee agregar esta validación solo después de que el usuario intente enviar el formulario. Luego, debe crear un nuevo estado para formError y agregarlo a su condición de función de envío que verificará que si sus entradas están vacías, entonces establezca el estado de formError en verdadero. Después de eso, su expresión para el estado de error de entrada se verá así:
error={formError && firstName.length === 0}
Obtendrá una buena experiencia de usuario cuando sus entradas se resalten en rojo solo cuando hubo un intento de enviar un formulario con entradas vacías.
Cuando el usuario está enviando el formulario, dado que todo lo que desea hacer es validar que se haya completado algo en los campos de nombre y apellido, puede verificar esto con:
this.state.field !== '' //returns true if it's filled ino
this.state.field.length > 0 //returns true if it's filled inen cualquier función 'handleSubmit' que cree, puede llamar a una función separada para validar todos sus campos. Esa función de validación puede verse así:
// returns 'true' if fields filled out, and 'false' if not validateForm = () => { if (this.state.firstName === '' || this.state.lastName === '') { //set error message: 'Please fill out all fields') return false; } else { return true; } }