The field is email, and it's the last field the user has to complete in order to send an invitation to an external user to join the platform.
the validation checks if the email is already being used, basically ⇒ if the email is already registered ⇒ throw error. This maintains the submit button disabled. The issue I'm having here is that until the promise resolves (for this punctual validation), which is about 1/2sec the field turns ok validated and the submit button becomes enable. If the user is quick (and you know, there's connection speed and other factors in the equation...) he can send an invitation and cause trouble/ terrific user excperience.
how can i make it work backwards => field not approved until promise finished?
Here's the code:
<template>
<Input
id="invite-email"
name="invite-email"
class="w-full"
:errors="v$.email.$errors"
v-model="v$.email.$model"
:invitePlayer="true"
>
{{ t('placeholder.email') }}
</Input>
</template>
<script lang="ts">
import { useVuelidate } from '@vuelidate/core'
import { required, email, minLength, helpers } from '@vuelidate/validators'
import { checkEmail } from '@/utils/validators'
const v$ = useVuelidate(rules, form)
const invite = async (): Promise<void> => {
loading.value = true
try {
const invitedUserResult: Guest = await store.dispatch('inviteUser', {
...Object.fromEntries(
Object.entries(form).filter(([_, v]) => v !== '')
),
fromUserID: store.state.user._id
})
console.log('invitedUserResult', invitedUserResult)
invitedUser.value = invitedUserResult
invitationLink.value = invitedUserResult.shortLink
showInviteSuccess.value = true
} catch (err) {
console.log(err)
}
loading.value = false
}
</script>
I tried to keep only the relevant code, tell me if you need more, thanks a lot!