EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Implement rudamentary (and hacky) validation of form fields

Browse Source
This commit is contained in:
Björn Fromme
2023-02-15 16:20:20 +01:00
parent e447ff1317
commit a1f63b1e43
2 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/BookingEdit.vue
+4 -4
View File
@@ -162,7 +162,7 @@
<textarea rows="2" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
v-model="participant.data.additionRequest"
@change="dirty = true"
placeholder="Sonstiges (z. B. Allergien, Verleihgrößen)"
placeholder="Sonstiges (z. B. Allergien)"
/>
</div>
</template>
@@ -428,7 +428,7 @@
this.invalidParticipantData[participantId] = {
invalid: 'Nationalität',
};
messages.push('Teilnehmer #'+participantId+': Nationalität')
messages.push('Teilnehmer #'+participantId+': Nationalität fehlt')
}
if (!this.hasSelectedRentals(participant)) {
continue;
@@ -437,13 +437,13 @@
this.invalidParticipantData[participantId] = {
invalid: 'Körpergröße',
};
messages.push('Teilnehmer #'+participantId+': Körpergröße')
messages.push('Teilnehmer #'+participantId+': Körpergröße fehlt')
}
if (!participant.data.shoeSize) {
this.invalidParticipantData[participantId] = {
invalid: 'Schuhgröße',
};
messages.push('Teilnehmer #'+participantId+': Schuhgröße')
messages.push('Teilnehmer #'+participantId+': Schuhgröße fehlt')
}
}
return messages
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/ParticipantSizesForm.vue
+18 -8
View File
@@ -7,17 +7,17 @@
<svg class="w-4 h-4" fill="none" :class="{ 'rotate-180': visible }" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="absolute top-100 left-0 z-50 mt-4 border shadow-md p-4 bg-white w-screen max-w-xs space-y-2" v-show="visible">
<input class="form-input w-full" type="text" placeholder="Körpergröße"
<input class="form-input w-full" type="text" placeholder="Körpergröße (120-220cm)"
v-model="participant.data.height" :disabled="!mutable"
@change="$emit('updated', participant)"
@change="validate(participant.data.height, 120, 220, 'Körpergröße')"
>
<input class="form-input w-full" type="text" placeholder="Schuhgröße"
v-model="participant.data.shoeSize" :disabled="!mutable"
@change="$emit('updated', participant)"
<input class="form-input w-full" type="text" placeholder="Schuhgröße (36-50)"
v-model.number="participant.data.shoeSize" :disabled="!mutable"
@change="validate(participant.data.shoeSize, 36, 50, 'Schuhgröße')"
>
<input class="form-input w-full" type="text" placeholder="Gewicht"
v-model="participant.data.weight" :disabled="!mutable"
@change="$emit('updated', participant)"
<input class="form-input w-full" type="text" placeholder="Gewicht (50 - 200kg)"
v-model.number="participant.data.weight" :disabled="!mutable"
@change="validate(participant.data.weight, 50, 200, 'Gewicht')"
>
</div>
</div>
@@ -45,6 +45,16 @@
visible: false,
}
},
methods: {
validate (value, min, max, label) {
let number = parseInt(value)
if (isNaN(number) || number < min || number > max) {
alert(`Bitte einen Wert zwischen ${min} und ${max} für ${label} eingeben`)
}
this.$emit('updated', this.participant)
},
},
computed: {
hasSelectedRentals () {
let result = false;