feat: add user registration page with form validation and API integration.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 45s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 3s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 45s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 3s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
This commit is contained in:
parent
025084b2bf
commit
7b7f44620d
1 changed files with 3 additions and 6 deletions
|
|
@ -103,13 +103,9 @@ const onUsernameInput = (val: string | number | null) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const onPhoneInput = (val: string | number | null) => {
|
const onPhoneInput = (val: string | number | null) => {
|
||||||
const value = String(val || '')
|
const value = String(val || '').replace(/\D/g, '').slice(0, 10)
|
||||||
registerForm.phone = value;
|
registerForm.phone = value;
|
||||||
if (/\D/.test(value)) {
|
if (errors.value.phone === 'กรุณากรอกเฉพาะตัวเลข') clearFieldError('phone');
|
||||||
errors.value.phone = 'กรุณากรอกเฉพาะตัวเลข';
|
|
||||||
} else {
|
|
||||||
if (errors.value.phone === 'กรุณากรอกเฉพาะตัวเลข') clearFieldError('phone');
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const onEmailInput = (val: string | number | null) => {
|
const onEmailInput = (val: string | number | null) => {
|
||||||
|
|
@ -315,6 +311,7 @@ const handleRegister = async () => {
|
||||||
:value="registerForm.phone"
|
:value="registerForm.phone"
|
||||||
@input="(e) => onPhoneInput((e.target as HTMLInputElement).value)"
|
@input="(e) => onPhoneInput((e.target as HTMLInputElement).value)"
|
||||||
type="tel"
|
type="tel"
|
||||||
|
maxlength="10"
|
||||||
class="w-full h-12 pl-12 pr-4 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
|
class="w-full h-12 pl-12 pr-4 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
|
||||||
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.phone}"
|
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.phone}"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue