As in the form formik to do asynchronous validation?

there is a form wrapped in formik
All fields validinputs to be sent via the scheme yup and after sending on the server return errors. But I understand how to write handlers, asynchronous field validation for email and username uniqueness before you submit the form ? If you write the handler to validate, as there is in the dock, it is first triggered on blur do all the fields in the second it ignoriruet already writing a schema field validation, that is, he do not care what the field is empty ) do Not get it. Even I do not correct.

import React from "react";

import { withFormik } from "formik";
import * as a from yup "yup";
import from axios "axios";

const RegForm = ({
values
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmiting,
}) => {
 return (
 <div classname="signup">
 <form onsubmit="{handleSubmit}">
 <div classname="form-group"> 
<label>
Nick*:
 <input type="text" name="username" onchange="{handleChange}" onblur="{handleBlur}" value="{values.username}" placeholder="Username">
</label>
 {touched.username &&
 errors.username && <p classname="error">{errors.username}</p>}
</div>

 <div classname="form-group">
<label>
Name*:
 <input type="text" name="screenname" onchange="{handleChange}" onblur="{handleBlur}" value="{values.screenname}" placeholder="screenname">
</label>
 {touched.screenname &&
 errors.screenname && <p classname="error">{errors.screenname}</p>}
</div>

 <div classname="form-group">
<label>
Email*:
 <input type="text" name="email" onchange="{handleChange}" onblur="{handleBlur}" value="{values.email}" placeholder="Email">
</label>
 {touched.email &&
 errors.email && <p classname="error">{errors.email}</p>}
</div>

 <div classname="form-group">
<label>
Password*:
 <input type="password" name="password" onchange="{handleChange}" onblur="{handleBlur}" value="{values.password}" placeholder="Password">
</label>
 {touched.password &&
 errors.password && <p classname="error">{errors.password}</p>}
</div>
 <div classname="form-group">
<label>
 Confirm password*:
 <input type="password" name="passwordConfirm" onchange="{handleChange}" onblur="{handleBlur}" value="{values.passwordConfirm}" placeholder="Confirm Password">
</label>
 {touched.passwordConfirm &&
 errors.passwordConfirm && (
 <p classname="error">{errors.passwordConfirm}</p>
)}
</div>
 <button type="submit" disabled="{isSubmiting}">
Send
</button>
</form>
</div>
);
};

export default withFormik({
 mapPropsToValues: ({ values }) => ({
 username: "",
 screenname: "",
 email: "",
 password: "",
 passwordConfirm: "",
}),
 validationSchema: yup.object().shape({
 username: yup.string().required("blank"),
 screenname: yup.string().required("blank"),
 email: yup
.string()
 .email("Invalid format")
 .required("blank"),
 password: yup
.string()
 .min(5, "Password short")
 .required("blank"),
 passwordConfirm: yup
.string()
 .oneOf([yup.ref("password")], "Passwords do not match")
 .required("blank"),
}),
 handleSubmit: (values, { props, setErrors }) => {
axios
 .post("/api/v1/signup", values)
 .then(res => props.onSubmit())
 .catch(({ response }) => {
 const { errors } = response.data;
setErrors(errors);
});
},
})(RegForm);
June 3rd 19 at 19:38
0 answer

Find more questions by tags ReduxReact