color empty required field in view

This commit is contained in:
grey-cat-1908 2024-09-03 21:28:16 +03:00
parent 258dd14b10
commit 2b66fb1abe
4 changed files with 24 additions and 3 deletions

View file

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

View file

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

View file

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

View file

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