mirror of
https://github.com/grey-cat-1908/formaptix-web.git
synced 2024-09-22 19:21:59 +03:00
fixed validation
This commit is contained in:
grey-cat-1908
parent
c456558baf
commit
cebd6adbd2
5 changed files with 261 additions and 194 deletions
|
|
@ -1,25 +1,32 @@
|
|||
<template>
|
||||
<div class="rating">
|
||||
<div class="rating-options">
|
||||
<label v-for="n in range" :key="n" class="rating-option">
|
||||
<input
|
||||
type="radio"
|
||||
:value="n"
|
||||
v-model="selectedValue"
|
||||
:required="isRequired"
|
||||
@change="updateValue"
|
||||
class="rating-option--btn"
|
||||
/>
|
||||
<span>{{ n }}</span>
|
||||
</label>
|
||||
<div class="default-card">
|
||||
<div class="view-form-q-title">
|
||||
<h3 class="form-q-title">{{ label }}</h3>
|
||||
<p class="form-q-description">{{ description }}</p>
|
||||
</div>
|
||||
<img v-if="imageUrl" :src="imageUrl" alt="image by user" />
|
||||
<div class="rating">
|
||||
<div class="rating-options">
|
||||
<label v-for="n in range" :key="n" class="rating-option">
|
||||
<input
|
||||
type="radio"
|
||||
:value="n"
|
||||
v-model="selectedValue"
|
||||
:required="isRequired"
|
||||
@change="updateValue"
|
||||
class="rating-option--btn"
|
||||
/>
|
||||
<span>{{ n }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
class="rating-delete default-button"
|
||||
v-if="selectedValue !== null"
|
||||
@click="cancelSelection"
|
||||
>
|
||||
Отменить выбор
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="rating-delete default-button"
|
||||
v-if="selectedValue !== null"
|
||||
@click="cancelSelection"
|
||||
>
|
||||
Отменить выбор
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,7 +34,21 @@
|
|||
import { ref, computed } from 'vue'
|
||||
import { PhCardsThree, PhCaretCircleUpDown } from '@phosphor-icons/vue'
|
||||
|
||||
import '@/styles/form/view.scss';
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
imageUrl: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
required: true
|
||||
|
|
|
|||
|
|
@ -1,27 +1,34 @@
|
|||
<template>
|
||||
<div class="selector">
|
||||
<div class="selector-labels">
|
||||
<div class="selector-labels-info">
|
||||
<PhCaretCircleUpDown :size="23" class="selector-labels-info--sign" />
|
||||
<div class="selector-labels-info--text">
|
||||
Выберите от {{ minValues }} до {{ Math.min(maxValues, options.length) }} {{ normalizeCountForm(Math.min(maxValues, options.length), ['варианта', 'вариантов', 'вариантов']) }}
|
||||
<div class="default-card" :class="{ 'form-red': error }">
|
||||
<div class="view-form-q-title">
|
||||
<h3 class="form-q-title">{{ label }}</h3>
|
||||
<p class="form-q-description">{{ description }}</p>
|
||||
</div>
|
||||
<img v-if="imageUrl" :src="imageUrl" alt="image by user" />
|
||||
<div class="selector">
|
||||
<div class="selector-labels">
|
||||
<div class="selector-labels-info">
|
||||
<PhCaretCircleUpDown :size="23" class="selector-labels-info--sign" />
|
||||
<div class="selector-labels-info--text">
|
||||
Выберите от {{ minValues }} до {{ Math.min(maxValues, options.length) }} {{ normalizeCountForm(Math.min(maxValues, options.length), ['варианта', 'вариантов', 'вариантов']) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selector-options">
|
||||
<div
|
||||
v-for="(option, index) in options"
|
||||
:key="index"
|
||||
class="selector-option default-button"
|
||||
@click="toggleSelection(index)"
|
||||
:class="{ selected: isSelected(index) }"
|
||||
>
|
||||
<span>{{ option.label }}</span>
|
||||
<div class="selector-options">
|
||||
<div
|
||||
v-for="(option, index) in options"
|
||||
:key="index"
|
||||
class="selector-option default-button"
|
||||
@click="toggleSelection(index)"
|
||||
:class="{ selected: isSelected(index) }"
|
||||
>
|
||||
<span>{{ option.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="error" class="selector-error">
|
||||
<PhXCircle class="selector-error--sign" :size="23" />{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
<p v-if="error" class="selector-error">
|
||||
<PhXCircle class="selector-error--sign" :size="23" />{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,7 +37,21 @@ import { ref, watch } from 'vue'
|
|||
import { PhCaretCircleUpDown, PhXCircle } from '@phosphor-icons/vue'
|
||||
import { normalizeCountForm } from '@/utils/formation'
|
||||
|
||||
import '@/styles/form/view.scss';
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
imageUrl: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
minValues: {
|
||||
type: Number,
|
||||
default: 1
|
||||
|
|
|
|||
|
|
@ -1,18 +1,25 @@
|
|||
<template>
|
||||
<div class="text-question">
|
||||
<input
|
||||
class="text-question-input"
|
||||
type="text"
|
||||
v-model="inputValue"
|
||||
:maxlength="maxLength"
|
||||
:required="isRequired"
|
||||
@input="validateInput"
|
||||
@blur="validateInput"
|
||||
placeholder="Ваш ответ"
|
||||
/>
|
||||
<p v-if="error" class="text-question-error">
|
||||
<PhXCircle class="text-question-error--sign" :size="23" />{{ error }}
|
||||
</p>
|
||||
<div class="default-card" :class="{ 'form-red': error }">
|
||||
<div class="view-form-q-title">
|
||||
<h3 class="form-q-title">{{ label }}</h3>
|
||||
<p class="form-q-description">{{ description }}</p>
|
||||
</div>
|
||||
<img v-if="imageUrl" :src="imageUrl" alt="image by user" />
|
||||
<div class="text-question">
|
||||
<input
|
||||
class="text-question-input"
|
||||
type="text"
|
||||
v-model="inputValue"
|
||||
:maxlength="maxLength"
|
||||
:required="isRequired"
|
||||
@input="validateInput"
|
||||
@blur="validateInput"
|
||||
placeholder="Ваш ответ"
|
||||
/>
|
||||
<p v-if="error" class="text-question-error">
|
||||
<PhXCircle class="text-question-error--sign" :size="23" />{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -22,7 +29,21 @@ import { PhXCircle } from '@phosphor-icons/vue'
|
|||
import { validateSNILS, validateTIN } from '@/utils/validators'
|
||||
import { normalizeCountForm } from '@/utils/formation'
|
||||
|
||||
import '@/styles/form/view.scss';
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
imageUrl: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
minLength: {
|
||||
type: Number,
|
||||
default: null
|
||||
|
|
|
|||
128
src/styles/form/view.scss
Normal file
128
src/styles/form/view.scss
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
.default-card {
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-main-border);
|
||||
background: var(--color-secondary-background);
|
||||
padding: 25px;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.form-red {
|
||||
border: 1px solid var(--color-red);
|
||||
}
|
||||
|
||||
.view {
|
||||
margin: 40px 0;
|
||||
&-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//gap: 25px 0;
|
||||
|
||||
&-container {
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
border: 1px solid var(--color-third-border);
|
||||
//margin-bottom: 20px;
|
||||
|
||||
& h2 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0 11px;
|
||||
color: var(--color-subtext);
|
||||
font-size: 16px;
|
||||
|
||||
&--sign {
|
||||
min-width: 23px;
|
||||
min-height: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
&-q {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px 0;
|
||||
margin: 35px auto;
|
||||
|
||||
&:empty {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 25px;
|
||||
|
||||
& h3 {
|
||||
font-weight: 400;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
& p {
|
||||
color: var(--color-description);
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-send,
|
||||
&-next {
|
||||
border-radius: 1rem;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
|
||||
&-send {
|
||||
padding: 15px 30px;
|
||||
border-radius: 1rem;
|
||||
background: var(--color-main);
|
||||
color: var(--color-alternative-text);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-space {
|
||||
display: flex;
|
||||
//justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px 30px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.form-title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.form-description {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.form-q-title {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.form-q-description {
|
||||
font-size: 0.88em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.form-title {
|
||||
font-size: 1.17em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,8 @@ import { useRoute } from 'vue-router'
|
|||
import { PhInfo, PhCardsThree } from '@phosphor-icons/vue'
|
||||
import { validateSNILS, validateTIN } from '@/utils/validators'
|
||||
|
||||
import '@/styles/form/view.scss';
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const data = ref({})
|
||||
|
|
@ -31,19 +33,18 @@ async function prepareNewPage() {
|
|||
}
|
||||
|
||||
function beforeSubmitValidate() {
|
||||
for (let question_id of currentPage.value.questions.keys()) {
|
||||
const question = currentPage.value.questions[question_id]
|
||||
for (let question of currentPage.value.questions) {
|
||||
const answer = answers.value[question.id]
|
||||
|
||||
if (!answer) return false;
|
||||
if (question.required && !(answer.value || answer.values)) return false;
|
||||
if (question.required && !answer.value && !answer.values) return false;
|
||||
|
||||
if (question.question_type === 1 && answer.value) {
|
||||
if (!question.validator && question.min_length && answer.value.length < question.min_length) return false;
|
||||
if (question.validator === 1 && !validateTIN(answer.value)) return false;
|
||||
if (question.validator === 2 && !validateSNILS(answer.value)) return false;
|
||||
} else if (question.question_type === 2) {
|
||||
return question.required && answer.values.length >= question.min_values
|
||||
} else if (question.question_type === 2 && !(question.required && answer.values.length >= question.min_values)) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
|
|
@ -105,14 +106,12 @@ onMounted(async () => {
|
|||
</div>
|
||||
<form @submit.prevent="submitForm" class="">
|
||||
<div class="view-form-q view-form-container">
|
||||
<div class="default-card" v-for="question in currentPage.questions">
|
||||
<div class="view-form-q-title">
|
||||
<h3 class="form-q-title">{{ question.label }}</h3>
|
||||
<p class="form-q-description">{{ question.description }}</p>
|
||||
</div>
|
||||
<img v-if="question.image_url" :src="question.image_url" alt="image by user" />
|
||||
<div v-for="question in currentPage.questions">
|
||||
<TextQuestion
|
||||
v-if="question.question_type === 1"
|
||||
:label="question.label"
|
||||
:description="question.description"
|
||||
:imageUrl="question.image_url"
|
||||
:minLength="question.min_length"
|
||||
:maxLength="question.max_length"
|
||||
:validator="question.validator"
|
||||
|
|
@ -122,6 +121,9 @@ onMounted(async () => {
|
|||
/>
|
||||
<SelectorQuestion
|
||||
v-if="question.question_type === 2"
|
||||
:label="question.label"
|
||||
:description="question.description"
|
||||
:imageUrl="question.image_url"
|
||||
:minValues="question.min_values"
|
||||
:maxValues="question.max_values"
|
||||
:options="question.options"
|
||||
|
|
@ -131,6 +133,9 @@ onMounted(async () => {
|
|||
/>
|
||||
<Scale
|
||||
v-if="question.question_type === 3"
|
||||
:label="question.label"
|
||||
:description="question.description"
|
||||
:imageUrl="question.image_url"
|
||||
:min="question.min_value"
|
||||
:max="question.max_value"
|
||||
:minLabel="question.min_label"
|
||||
|
|
@ -158,133 +163,4 @@ onMounted(async () => {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.default-card {
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-main-border);
|
||||
background: var(--color-secondary-background);
|
||||
padding: 25px;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.form-red {
|
||||
border: 1px solid var(--color-red);
|
||||
}
|
||||
|
||||
.view {
|
||||
margin: 40px 0;
|
||||
&-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//gap: 25px 0;
|
||||
|
||||
&-container {
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
border: 1px solid var(--color-third-border);
|
||||
//margin-bottom: 20px;
|
||||
|
||||
& h2 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0 11px;
|
||||
color: var(--color-subtext);
|
||||
font-size: 16px;
|
||||
|
||||
&--sign {
|
||||
min-width: 23px;
|
||||
min-height: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
&-q {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px 0;
|
||||
margin: 35px auto;
|
||||
|
||||
&:empty {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 25px;
|
||||
|
||||
& h3 {
|
||||
font-weight: 400;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
& p {
|
||||
color: var(--color-description);
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-send,
|
||||
&-next {
|
||||
border-radius: 1rem;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
|
||||
&-send {
|
||||
padding: 15px 30px;
|
||||
border-radius: 1rem;
|
||||
background: var(--color-main);
|
||||
color: var(--color-alternative-text);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-space {
|
||||
display: flex;
|
||||
//justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px 30px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.form-title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.form-description {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.form-q-title {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.form-q-description {
|
||||
font-size: 0.88em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.form-title {
|
||||
font-size: 1.17em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue