'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