init

components/Contacts.vue

@@ -43,41 +43,71 @@
         </div>
 
         <UCard variant="subtle" class="w-full" :ui="{ root: 'max-w-[500px]' }">
+          <form @submit.prevent="onSubmit">
             <div class="flex flex-col gap-4">
               <div class="flex flex-col gap-2">
                 Как к вам обращаться
                 <UInput
+                  id="name"
+                  v-model="name"
+                  v-bind="nameAttrs"
+                  name="name"
                   placeholder="Имя"
                   size="xl"
                   class="w-full"
+                  autofocus
                 />
+
+                <div v-if="errors?.name" style="color: #ff6467">
+                  {{ errors?.name }}
+                </div>
               </div>
 
               <div class="flex flex-col gap-2">
                 Телефон
                 <UInput
+                  id="phone"
+                  v-model="phone"
                   v-maska="'+7 (###) ###-##-##'"
+                  name="phone"
+                  v-bind="phoneAttrs"
                   placeholder="+7 (___) __-__-__"
                   size="xl"
                   class="w-full"
                 />
+
+                <div v-if="errors?.phone" style="color: #ff6467">
+                  {{ errors?.phone }}
+                </div>
               </div>
 
               <div class="flex flex-col gap-2">
                 Что вас интересует?
                 <div>
                   <USelect
+                    id="service"
+                    v-model="service"
+                    v-bind="serviceAttrs"
+                    name="service"
                     :items="services"
                     class="w-full"
                     size="xl"
                     placeholder="выберите услугу"
                   />
+
+                  <div v-if="errors?.service" style="color: #ff6467">
+                    {{ errors?.service }}
+                  </div>
                 </div>
               </div>
 
               <div class="flex flex-col gap-2">
                 Комментарий
                 <UTextarea
+                  id="comment"
+                  v-model="comment"
+                  v-bind="commentAttrs"
+                  name="comment"
                   size="xl"
                   placeholder="расскажите о ваших требованиях.."
                 />
@@ -88,16 +118,23 @@
                   size="xl"
                   class="flex place-content-center w-full"
                   label="Отправить заявку"
+                  type="submit"
+                  :disabled="errors && Object.keys(errors).length > 0"
                 />
               </div>
             </div>
+          </form>
         </UCard>
       </div>
     </template>
   </UPageSection>
+
+  <UButton label="pizda" @click="pizda()" />
 </template>
 
-<script setup>
+<script setup lang="ts">
+const toast = useToast()
+
 const contacts = [
   {
     label: 'Телефон',
@@ -124,6 +161,53 @@ const services = [
   'продажа недвижимости',
   'аренда недвижимости',
 ]
+
+const { errors, handleSubmit, defineField } = useForm({
+  initialValues: {
+    name: '',
+    phone: '',
+    service: '',
+    comment: '',
+  },
+  validationSchema: {
+    name(value: string) {
+      if (!value)
+        return 'Укажите имя'
+      if (value.trim().length < 2)
+        return 'Минимум 2 символа'
+      if (/\d/.test(value)) {
+        return 'Укажите корректное имя'
+      }
+      return true
+    },
+    phone(value: string) {
+      if (!value)
+        return 'Укажите телефон'
+      const digits = (value || '').replace(/\D/g, '')
+      if (digits.length < 11)
+        return 'Введите корректный телефон'
+      return true
+    },
+    service(value: string) {
+      if (!value)
+        return 'Укажите услугу'
+      return true
+    },
+  },
+})
+
+const [name, nameAttrs] = defineField('name')
+const [phone, phoneAttrs] = defineField('phone')
+const [service, serviceAttrs] = defineField('service')
+const [comment, commentAttrs] = defineField('comment')
+
+const onSubmit = handleSubmit((values) => {
+  console.log('onSubmit', values)
+
+  toast.add({
+    title: 'Заявка успешно отправлена, мы скоро с вами свяжемся !',
+  })
+})
 </script>
 
 <style lang="scss">