validateForm เพิ่มเรื่องร้องเรียน

src/modules/11_discipline/components/4_Order/Step02.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from "vue";
 const props = defineProps({
   next: {
     type: Function,
@@ -11,10 +12,79 @@ const props = defineProps({
 });
 const next = () => props.next();
 const previous = () => props.previous();
+
+const name = ref<string>("");
+const lastname = ref<string>("");
+const age = ref<string>("");
+
+const nameRef = ref<any>(null);
+const ageRef = ref<any>(null);
+const lastnameRef = ref<any>(null);
+const myObject: MyObject = {
+  name: nameRef,
+  lastname: lastnameRef,
+  age: ageRef,
+};
+interface MyObject {
+  name: any;
+  lastname: any;
+  age: any;
+  [key: string]: any;
+}
+
+function onSubmit() {
+  const hasError = [];
+  for (const key in myObject) {
+    if (Object.prototype.hasOwnProperty.call(myObject, key)) {
+      const property = myObject[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    console.log("ผ่าน  สำเร็จ!");
+  } else {
+    console.log("ไม่ผ่าน ");
+  }
+}
 </script>
 
 <template>
   <div><h1>step02</h1></div>
+  <form @submit.prevent.stop="onSubmit" class="q-gutter-md">
+    <q-input
+      ref="nameRef"
+      filled
+      v-model="name"
+      label="Your name *"
+      hint="Name and surname"
+      lazy-rules
+      :rules="[(val) => !!val || `${'Name and surname'}`]"
+    />
+    <q-input
+      ref="lastnameRef"
+      filled
+      v-model="lastname"
+      label="lastname *"
+      lazy-rules
+      :rules="[(val) => !!val || `${'lastname'}`]"
+    />
+    <q-input
+      ref="ageRef"
+      filled
+      type="number"
+      v-model="age"
+      label="Your age *"
+      lazy-rules
+      :rules="[(val) => !!val || `${'Your age'}`]"
+    />
+
+    <div>
+      <q-btn label="Submit" type="submit" color="primary" />
+    </div>
+  </form>
   <q-card-actions align="right">
     <q-btn
       dense