mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 06:47:33 +00:00
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:
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user