필드는 e-메일입니다.플랫폼에 참여하기 위해 외부 사용자에게 초대를 보내기 위해 사용자가 입력해야 하는 마지막 필드입니다.
검증에서는 이메일이 이미 사용되고 있는지 여부를 확인합니다.기본적으로 이메일이 이미 등록되어 있는지 여부, 슬로우 에러입니다.이것에 의해, 송신 버튼이 디세이블인 채로 있습니다.여기서의 문제는 약속이 해결될 때까지(약 1/2초), 필드가 OK validated로 바뀌고 Submit(제출) 버튼이 활성화된다는 것입니다.유저가 재빠르면(접속 속도나 그 외의 요인도 있습니다) 초대장을 송신해, 트러블이나 뛰어난 유저 익스피리언스를 발생시킬 수 있습니다.
약속을 마칠 때까지 => 필드에서 승인되지 않도록 하려면 어떻게 해야 합니까?
코드는 다음과 같습니다.
<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> 관련 코드만 지키려고 했는데, 더 필요하시면 말씀하세요, 감사합니다!