fix: Add validation and consistent data structure for survey 'Other' options (#5620)

## Summary
- Added validation to prevent users from proceeding when "Other" is
selected but text input is empty
- Changed data structure to send consistent string values to database
instead of mixed objects
- Both useCase and industry now send user input directly when "Other" is
selected

## Changes
- Added `useCaseOther` field and input to survey form  
- Updated `validStep2` to validate useCaseOther when useCase is 'other'
- Modified submit payload to send string values consistently for both
useCase and industry fields

## Test plan
- [x] Select "Other" for use case without filling input → Next button
disabled
- [x] Select "Other" for industry without filling input → Next button
disabled
- [x] Fill in "Other" text inputs → Next button enabled
- [x] Submit survey with "Other" selections → Payload sends user input
as string values

🤖 Generated with [Claude Code](https://claude.ai/code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5620-fix-Add-validation-and-consistent-data-structure-for-survey-Other-options-2716d73d3650811faa6efc547db14930)
by [Unito](https://www.unito.io)
This commit is contained in:
Jin Yi
2025-09-18 13:14:20 +09:00
committed by GitHub
parent 108ad22d82
commit 16ebe33488

View File

@@ -80,6 +80,13 @@
>
</div>
</div>
<div v-if="surveyData.useCase === 'other'" class="mt-4 ml-8">
<InputText
v-model="surveyData.useCaseOther"
class="w-full"
placeholder="Please specify"
/>
</div>
</div>
<div class="flex gap-6 pt-4">
@@ -243,6 +250,7 @@ const isSubmitting = ref(false)
const surveyData = ref({
familiarity: '',
useCase: '',
useCaseOther: '',
industry: '',
industryOther: '',
making: [] as string[]
@@ -265,7 +273,8 @@ const purposeOptions = [
},
{ label: 'Client work (freelance)', value: 'client' },
{ label: 'My own workplace (in-house)', value: 'inhouse' },
{ label: 'Academic research', value: 'research' }
{ label: 'Academic research', value: 'research' },
{ label: 'Other', value: 'other' }
]
const industryOptions = [
@@ -290,7 +299,13 @@ const makingOptions = [
// Validation per step
const validStep1 = computed(() => !!surveyData.value.familiarity)
const validStep2 = computed(() => !!surveyData.value.useCase)
const validStep2 = computed(() => {
if (!surveyData.value.useCase) return false
if (surveyData.value.useCase === 'other') {
return !!surveyData.value.useCaseOther?.trim()
}
return true
})
const validStep3 = computed(() => {
if (!surveyData.value.industry) return false
if (surveyData.value.industry === 'other') {
@@ -314,13 +329,16 @@ const goTo = (step: number, activate: (val: string | number) => void) => {
const onSubmitSurvey = async () => {
try {
isSubmitting.value = true
// prepare payload: collapse "other" field
// prepare payload with consistent structure
const payload = {
familiarity: surveyData.value.familiarity,
useCase: surveyData.value.useCase,
useCase:
surveyData.value.useCase === 'other'
? surveyData.value.useCaseOther?.trim() || 'other'
: surveyData.value.useCase,
industry:
surveyData.value.industry === 'other'
? { type: 'other', text: surveyData.value.industryOther }
? surveyData.value.industryOther?.trim() || 'other'
: surveyData.value.industry,
making: surveyData.value.making
}