Add: Register validation & error alerts for user safety

Frontend-Learner/.nuxt/manifest/latest.json

@@ -1 +1 @@
-{"id":"dev","timestamp":1768444934817}
+{"id":"dev","timestamp":1768446829065}

Frontend-Learner/.nuxt/manifest/meta/dev.json

@@ -1 +1 @@
-{"id":"dev","timestamp":1768444934817,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}
+{"id":"dev","timestamp":1768446829065,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

Frontend-Learner/.nuxt/nitro.json

@@ -1,5 +1,5 @@
 {
-  "date": "2026-01-15T02:42:23.499Z",
+  "date": "2026-01-15T03:13:56.323Z",
   "preset": "nitro-dev",
   "framework": {
     "name": "nuxt",
@@ -9,9 +9,9 @@
     "nitro": "2.12.8"
   },
   "dev": {
-    "pid": 19744,
+    "pid": 23116,
     "workerAddress": {
-      "socketPath": "\\\\.\\pipe\\nitro-worker-19744-1-1-2469.sock"
+      "socketPath": "\\\\.\\pipe\\nitro-worker-23116-1-1-1366.sock"
     }
   }
 }

Frontend-Learner/.nuxt/nuxt.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="quasar" />
+/// <reference types="@nuxtjs/tailwindcss" />
 /// <reference types="nuxt-quasar-ui" />
 /// <reference types="@nuxt/devtools" />
-/// <reference types="@nuxtjs/tailwindcss" />
 /// <reference types="@nuxt/telemetry" />
 /// <reference path="types/builder-env.d.ts" />
 /// <reference types="nuxt" />

Frontend-Learner/.nuxt/tailwind/postcss.mjs

@@ -1,4 +1,4 @@
-// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 15/1/2569 09:45:34
+// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 15/1/2569 10:13:50
 import "@nuxtjs/tailwindcss/config-ctx"
 import configMerger from "@nuxtjs/tailwindcss/merger";
 

Frontend-Learner/pages/auth/register.vue

@@ -34,21 +34,118 @@ const registerForm = reactive({
 
 // Validation rules
 const registerRules = {
-  username: { rules: { required: true, minLength: 4 }, label: "ชื่อผู้ใช้" },
-  firstName: { rules: { required: true, minLength: 2 }, label: "ชื่อ" },
-  lastName: { rules: { required: true, minLength: 2 }, label: "นามสกุล" },
+  username: { 
+    rules: { 
+      required: true, 
+      minLength: 4,
+      custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
+    }, 
+    label: "ชื่อผู้ใช้" 
+  },
+  firstName: { 
+    rules: { 
+      required: true, 
+      minLength: 2,
+      custom: (val: string) => /\d/.test(val) ? 'ห้ามใส่ตัวเลข' : null
+    }, 
+    label: "ชื่อ" 
+  },
+  lastName: { 
+    rules: { 
+      required: true, 
+      minLength: 2,
+      custom: (val: string) => /\d/.test(val) ? 'ห้ามใส่ตัวเลข' : null
+    }, 
+    label: "นามสกุล" 
+  },
   phone: {
-    rules: { required: true, pattern: /^0[0-9]{8,9}$/ },
+    rules: { 
+      required: true, 
+      pattern: /^0[0-9]{8,9}$/,
+      custom: (val: string) => /\D/.test(val) ? 'กรุณากรอกเฉพาะตัวเลข' : null
+    },
     label: "เบอร์โทรศัพท์",
   },
-  email: { rules: { required: true, email: true }, label: "อีเมล" },
-  password: { rules: { required: true, minLength: 8 }, label: "รหัสผ่าน" },
+  email: { 
+    rules: { 
+      required: true, 
+      email: true,
+      custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null 
+    }, 
+    label: "อีเมล" 
+  },
+  password: { 
+    rules: { 
+      required: true, 
+      minLength: 8,
+      custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null 
+    }, 
+    label: "รหัสผ่าน" 
+  },
   confirmPassword: {
     rules: { required: true, match: "password" },
     label: "ยืนยันรหัสผ่าน",
   },
 };
 
+const onUsernameInput = (val: string) => {
+  registerForm.username = val;
+  if (/[\u0E00-\u0E7F]/.test(val)) {
+    errors.value.username = 'ห้ามใส่ภาษาไทย';
+  } else {
+    // Only clear if the error is specifically about Thai chars, 
+    // otherwise we might clear minLength errors undesirably
+    if (errors.value.username === 'ห้ามใส่ภาษาไทย') {
+      clearFieldError('username');
+    }
+  }
+};
+
+const onPhoneInput = (val: string) => {
+  registerForm.phone = val;
+  if (/\D/.test(val)) {
+    errors.value.phone = 'กรุณากรอกเฉพาะตัวเลข';
+  } else {
+    if (errors.value.phone === 'กรุณากรอกเฉพาะตัวเลข') clearFieldError('phone');
+  }
+};
+
+const onEmailInput = (val: string) => {
+  registerForm.email = val;
+  if (/[\u0E00-\u0E7F]/.test(val)) {
+    errors.value.email = 'ห้ามใส่ภาษาไทย';
+  } else {
+    if (errors.value.email === 'ห้ามใส่ภาษาไทย') clearFieldError('email');
+  }
+};
+
+const onPasswordInput = (val: string) => {
+  registerForm.password = val;
+  if (/[\u0E00-\u0E7F]/.test(val)) {
+    errors.value.password = 'ห้ามใส่ภาษาไทย';
+  } else {
+    if (errors.value.password === 'ห้ามใส่ภาษาไทย') clearFieldError('password');
+  }
+};
+
+const onFirstNameInput = (val: string) => {
+  registerForm.firstName = val;
+  if (/\d/.test(val)) {
+    errors.value.firstName = 'ห้ามใส่ตัวเลข';
+  } else {
+    if (errors.value.firstName === 'ห้ามใส่ตัวเลข') clearFieldError('firstName');
+  }
+};
+
+const onLastNameInput = (val: string) => {
+  registerForm.lastName = val;
+  if (/\d/.test(val)) {
+    errors.value.lastName = 'ห้ามใส่ตัวเลข';
+  } else {
+    if (errors.value.lastName === 'ห้ามใส่ตัวเลข') clearFieldError('lastName');
+  }
+};
+
 const handleRegister = async () => {
   if (!validate(registerForm, registerRules)) return;
 
@@ -106,36 +203,36 @@ const handleRegister = async () => {
     <form @submit.prevent="handleRegister">
         <!-- Username -->
       <FormInput
-        v-model="registerForm.username"
+        :model-value="registerForm.username"
         label="ชื่อผู้ใช้"
         placeholder="username"
         :error="errors.username"
         required
         class="dark-form-input"
-        @update:model-value="clearFieldError('username')"
+        @update:model-value="onUsernameInput"
       />
        <!-- Email -->
        <FormInput
-        v-model="registerForm.email"
+        :model-value="registerForm.email"
         label="อีเมล"
         type="email"
         placeholder="student@example.com"
         :error="errors.email"
         required
         class="dark-form-input"
-        @update:model-value="clearFieldError('email')"
+        @update:model-value="onEmailInput"
       />
 
       <!-- Password Fields -->
       <FormInput
-        v-model="registerForm.password"
+        :model-value="registerForm.password"
         label="รหัสผ่าน"
         type="password"
         placeholder="สร้างรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)"
         :error="errors.password"
         required
         class="dark-form-input"
-        @update:model-value="clearFieldError('password')"
+        @update:model-value="onPasswordInput"
       />
 
       <FormInput
@@ -165,36 +262,36 @@ const handleRegister = async () => {
         </div>
         <div class="col-span-8">
           <FormInput
-            v-model="registerForm.firstName"
+            :model-value="registerForm.firstName"
             label="ชื่อ"
             placeholder=""
             :error="errors.firstName"
             required
             class="dark-form-input"
-            @update:model-value="clearFieldError('firstName')"
+            @update:model-value="onFirstNameInput"
           />
         </div>
       </div>
 
       <FormInput
-        v-model="registerForm.lastName"
+        :model-value="registerForm.lastName"
         label="นามสกุล"
         placeholder=""
         :error="errors.lastName"
         required
         class="dark-form-input"
-        @update:model-value="clearFieldError('lastName')"
+        @update:model-value="onLastNameInput"
       />
 
       <FormInput
-        v-model="registerForm.phone"
+        :model-value="registerForm.phone"
         label="เบอร์โทรศัพท์"
         type="tel"
         placeholder=""
         :error="errors.phone"
         required
         class="dark-form-input"
-        @update:model-value="clearFieldError('phone')"
+        @update:model-value="onPhoneInput"
       />
 
       <!-- Submit Button -->