'Yup is not working correctly sending too much requests
I use formik with Yup.
My First Problem:
I test my username and email in serverside if that exists. If I type on username it automatically checks the email... thats bad it should only check the current type.
My Second Problem: if I makes a request to my server with axios it makes 5 request, if I remove the validationSchema with yup, it makes one. So why makes yup so much problems for me ? how can I fix it ?
Yup:
const validateRegisterForm = Yup.object({
email: Yup.string()
.max(120, t('register.validation.email_error_maxlength'))
.min(6, t('register.validation.email_error_minlength'))
.email(t('register.validation.email_error_invalid'))
.required()
.test(
'email_check_already_exists',
t('register.validation.email_error_already_exists'),
async (email) => {
const { data } = await axios.post(
'http://192.168.0.249:4000/email',
{ email }
)
return data?.error === false ? true : false;
}
),
password: Yup.string()
.max(200, t('register.validation.password_error_maxlength'))
.min(6, t('register.validation.password_error_minlength'))
.required(),
password_repeat: Yup.string()
.oneOf([Yup.ref('password'), null], t('register.validation.password_repeat_equal')),
sur_and_lastname: Yup.string()
.max(100, t('register.validation.fullname_error_maxlength'))
.min(3, t('register.validation.fullname_error_minlength')),
username: Yup.string()
.max(26, t('register.validation.username_error_maxlength'))
.min(3, t('register.validation.username_error_minlength'))
.test(
'username_exists',
t('register.validation.username_error_already_exists'),
async (username) => {
const { data } = await axios.post('http://192.168.0.249:4000/username', {
username
})
return data?.error === false ? true : false;
}
)
});
const formik = useFormik<IFormik>({
initialValues: {
email: '',
password: '',
password_repeat: '',
sur_and_lastname: '',
birthday: null,
gender: null,
username: '',
},
validationSchema: validateRegisterForm,
onSubmit: (val) => {
console.log('assdaas');
}
});
Input
<Input onChangeText={formik.handleChange('email')} value={formik.values.email} style={[InputStyles.normal_icon, s.input]} placeholder={t('register.step1.placeholder_email')} placeholderTextColor={'#fff'} />
<Input onChangeText={formik.handleChange('username')} value={formik.values.username} style={[InputStyles.normal_icon, s.input]} placeholder={t('register.step3.placeholder_username_shopname')} placeholderTextColor={'#fff'} />
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
