I have created a form and connected it to server.
<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>
In case of validation error response is like this "message": "ValidationError: confirmPassword: Confirm Password did not match"
By regular expression I can pic up the error from this message e.g. "Confirm password did not match".
I don't know how to show this error below respective input field ?
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.-]+\.[A-Z]{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>