mirror of
https://github.com/grey-cat-1908/formaptix-web.git
synced 2024-09-22 19:21:59 +03:00
color empty required field in view
This commit is contained in:
parent
258dd14b10
commit
2b66fb1abe
4 changed files with 24 additions and 3 deletions
|
@ -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
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
@ -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"
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue