color empty required field in view

src/components/forms/ScaleQuestion.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="default-card">
+  <div class="default-card" :class="{ 'form-red': isEmpty }">
     <div class="view-form-q-title">
       <h3 class="form-q-title">{{ label }}</h3>
       <p class="form-q-description">{{ description }}</p>
@@ -72,6 +72,10 @@ const props = defineProps({
   isRequired: {
     type: Boolean,
     default: true
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false
   }
 })
 

src/components/forms/SelectorQuestion.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="default-card" :class="{ 'form-red': error }">
+  <div class="default-card" :class="{ 'form-red': error || isEmpty }">
     <div class="view-form-q-title">
       <h3 class="form-q-title">{{ label }}</h3>
       <p class="form-q-description">{{ description }}</p>
@@ -78,6 +78,10 @@ const props = defineProps({
   isRequired: {
     type: Boolean,
     default: true
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false
   }
 })
 

src/components/forms/TextQuestion.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="default-card" :class="{ 'form-red': error }">
+  <div class="default-card" :class="{ 'form-red': error || isEmpty }">
     <div class="view-form-q-title">
       <h3 class="form-q-title">{{ label }}</h3>
       <p class="form-q-description">{{ description }}</p>
@@ -63,6 +63,10 @@ const props = defineProps({
   isRequired: {
     type: Boolean,
     default: true
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false
   }
 })
 

src/views/form/View.vue

@@ -22,6 +22,8 @@ const answers = ref([])
 const isFormNotFound = ref(true)
 const isSent = ref(false)
 
+const emptyQuestions = ref({});
+
 async function prepareNewPage() {
   currentPage.value = data.value.pages[currentPageNumber.value]
   currentPage.value.questions.forEach((q) => {
@@ -36,6 +38,8 @@ function beforeSubmitValidate() {
   for (let question of currentPage.value.questions) {
     const answer = answers.value[question.id]
 
+    emptyQuestions.value[question.id] = true;
+
     if (!answer) return false
     if (question.required && !answer.value && !answer.values) return false
 
@@ -50,6 +54,8 @@ function beforeSubmitValidate() {
     ) {
       return false
     }
+
+    delete emptyQuestions.value[question.id]
   }
   return true
 }
@@ -122,6 +128,7 @@ onMounted(async () => {
                   :maxLength="question.max_length"
                   :validator="question.validator"
                   :isRequired="question.required"
+                  :isEmpty="emptyQuestions[question.id]"
                   v-model="answers[question.id].value"
                   @input="answers[question.id].value = $event"
                 />
@@ -134,6 +141,7 @@ onMounted(async () => {
                   :maxValues="question.max_values"
                   :options="question.options"
                   :isRequired="question.required"
+                  :isEmpty="emptyQuestions[question.id]"
                   v-model="answers[question.id].values"
                   @input="answers[question.id].values = $event"
                 />
@@ -147,6 +155,7 @@ onMounted(async () => {
                   :minLabel="question.min_label"
                   :maxLabel="question.max_label"
                   :isRequired="question.required"
+                  :isEmpty="emptyQuestions[question.id]"
                   v-model="answers[question.id].value"
                   @input="answers[question.id].value = $event"
                 />