From e946079728e29b5873bd135359a45a3b2f3808c0 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 10 Jul 2024 12:44:18 +0300
Subject: [PATCH] modal check validate

---
 components/modal.vue | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/modal.vue b/components/modal.vue
index fab00a0..b0c8c20 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -30,12 +30,15 @@ type modalDataType = {
     phone?: string
     name?: string
     email?: string
+    policy: boolean
 }
 const modal_data = reactive<modalDataType>({
     email: undefined,
     phone: undefined,
-    name: undefined
+    name: undefined,
+    policy: true
 })
+
 const modal_form = reactive({
     disabled: true,
     errors: [],
@@ -62,13 +65,17 @@ const validate = () => {
 
     modal_form.disabled = true
     if (
-        (modal_data.phone && phone_regexp.test(modal_data.phone))
-        || (modal_data.email && email_regex.test(modal_data.email))
+        (
+            (modal_data.phone && phone_regexp.test(modal_data.phone))
+            || (modal_data.email && email_regex.test(modal_data.email))
+        ) && modal_data.policy == true
     ) {
         modal_form.disabled = false
         return
     }
 }
+watch(modal_data, validate)
+
 const submit = async (e: any) => {
     goal('submit_form', modal_data)
     modal_state.show_status = 'loading'
@@ -202,15 +209,15 @@ const policy = () => {
             <template v-else-if="modal_state.show_form">
                 <h2>Оставьте контакты для связи </h2>
                 <form @submit.prevent="submit" ref="form">
-                    <input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
+                    <input type="text" placeholder="Ваше имя" v-model="modal_data.name" />
                     <input type="phone" placeholder="Ваш номер телефона" v-model="modal_data.phone"
-                        @keypress="validateInput" @keyup="validate" />
-                    <input type="e-mail" placeholder="Ваш e-mail" v-model="modal_data.email" @keypress="validateInput"
-                        @keyup="validate" />
+                        @keypress="validateInput" />
+                    <input type="e-mail" placeholder="Ваш e-mail" v-model="modal_data.email"
+                        @keypress="validateInput" />
                     <div class="flex gap-4 justify-between items-center">
-                        <input type="checkbox" id="policy" />
+                        <input type="checkbox" id="policy" v-model="modal_data.policy" />
                         <label for="policy">Соглашение... <NuxtLink to="policy" @click="policy">cсылка</NuxtLink>
-                            </label>
+                        </label>
                     </div>
                     {{ total_txt && total_txt.total[0] }}
                     <div class="flex gap-4">