Creé un formulario y lo conecté al servidor.
<form> <h2>Create Account</h2> <fieldset> <label for="name">Username</label> <input onChange={(e) => handle(e)} value={data.name} type="text" id="name" name="name" /> <label for="email">Email</label> <input onChange={(e) => handle(e)} value={data.email} type="email" id="email" name="email" /> <label for="password">Password</label> <input onChange={(e) => handle(e)} value={data.password} type="text" id="password" name="password" /> <label for="confirmPassword">Confirm Password</label> <input onChange={(e) => handle(e)} value={data.confirmPassword} type="text" id="confirmPassword" name="confirmPassword" /> </fieldset> <button type="submit" onClick={(e) => sendData(e)}> Create Account </button> </form>En caso de error de validación, la respuesta es como este "mensaje": "ValidationError: confirmPassword: Confirm Password not match "
Mediante una expresión regular, puedo detectar el error de este mensaje, por ejemplo, " Confirmar contraseña no coincide ".
No sé cómo mostrar este error debajo del campo de entrada respectivo.
const reducer = combineReducers({ form: formReducer.validation({ loginValidation: loginValidation, }) }) const loginValidation = values => { const errors = {} if (!values.email) { errors.email = 'Required' } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[AZ]{2,4}$/i.test(values.email)) { errors.email = 'Invalid email address' } if (!values.password) { errors.age = 'Required' } if (!values.confirmPassword) { errors.age = 'Required' } if (values.confirmPassword !== values.password) { errors.age = 'Confirm Password did not match' } return errors } <div> <label>Email</label> <Field name="email" component={email => <div> <input type="text" {...email} placeholder="Email"/> {email.touched && email.error && <span>{email.error}</span>} </div> }/> </div>