https://codesandbox.io/s/5kvyxlwqwp
AsyncValidationForm.js
const AsyncValidationForm = props => {
const { handleSubmit, pristine, reset, submitting } = props;
console.log("AsyncValidationForm--->", props);
return (
<form onSubmit={handleSubmit}>
<Field
name="username"
type="text"
component={renderField}
label="Username"
/>
<Field
name="password"
type="password"
component={renderField}
label="Password"
/>
<div>
<button type="submit" disabled={submitting}>
Sign Up
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
);
};
asyncValidate.js
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const asyncValidate = (values /*, dispatch */) => {
return sleep(1000).then(() => {
// simulate server latency
console.log("asyncValidate--->", values);
if (["john", "paul", "george", "ringo"].includes(values.username)) {
throw { username: "That username is taken" };
}
});
};
export default asyncValidate;
validate.js
const validate = values => {
const errors = {};
if (!values.username) {
errors.username = "Required";
}
if (!values.password) {
errors.password = "Required";
}
console.log("validate--->", errors);
return errors;
};
export default validate;