From 344f302c7669ee148008f3d10df8fd82b4e798ce Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Wed, 13 Mar 2024 20:25:41 +0200
Subject: [PATCH] refactor field validation

---
 app/controllers/api/templates_controller.rb   | 1 +
 app/javascript/submission_form/phone_step.vue | 5 ++---
 app/javascript/submission_form/text_step.vue  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/controllers/api/templates_controller.rb b/app/controllers/api/templates_controller.rb
index 2f563793..8e35e1ae 100644
--- a/app/controllers/api/templates_controller.rb
+++ b/app/controllers/api/templates_controller.rb
@@ -93,6 +93,7 @@ module Api
                     { preferences: {},
                       conditions: [%i[field_uuid value action]],
                       options: [%i[value uuid]],
+                      validation: %i[message pattern],
                       areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]] }
       ]
 
diff --git a/app/javascript/submission_form/phone_step.vue b/app/javascript/submission_form/phone_step.vue
index e9c5d7b2..df3b04fd 100644
--- a/app/javascript/submission_form/phone_step.vue
+++ b/app/javascript/submission_form/phone_step.vue
@@ -68,14 +68,13 @@
         class="base-input !text-2xl w-full"
         autocomplete="tel"
         pattern="^\+[0-9\s\-]+$"
-        :oninvalid="`this.value ? this.setCustomValidity('${t('use_international_format')}...') : ''`"
-        oninput="this.setCustomValidity('')"
         type="tel"
         inputmode="tel"
         :required="field.required"
         placeholder="+1 234 567-8900"
         :name="`values[${field.uuid}]`"
-        @input="$emit('update:model-value', $event.target.value)"
+        @invalid="$event.target.value ? $event.target.setCustomValidity(`${t('use_international_format')}...`) : ''"
+        @input="[$event.target.setCustomValidity(''), $emit('update:model-value', $event.target.value)]"
         @focus="$emit('focus')"
       >
     </div>
diff --git a/app/javascript/submission_form/text_step.vue b/app/javascript/submission_form/text_step.vue
index dc8d9a52..ca7d4302 100644
--- a/app/javascript/submission_form/text_step.vue
+++ b/app/javascript/submission_form/text_step.vue
@@ -35,11 +35,11 @@
       :class="{ '!pr-11 -mr-10': !field.validation?.pattern }"
       :required="field.required"
       :pattern="field.validation?.pattern"
-      :oninvalid="field.validation?.message ? `this.setCustomValidity(${JSON.stringify(field.validation.message)})` : ''"
-      :oninput="field.validation?.message ? `this.setCustomValidity('')` : ''"
       :placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`"
       type="text"
       :name="`values[${field.uuid}]`"
+      @invalid="field.validation?.message ? $event.target.setCustomValidity(field.validation.message) : ''"
+      @input="field.validation?.message ? $event.target.setCustomValidity('') : ''"
       @focus="$emit('focus')"
     >
     <textarea