How to show Multidropdown validation only after interaction or Next click in multi-step form

Questions
1

I have a multi-step Job Post form that uses the same Next button for all steps. A custom state currentStep controls which group is shown, and on click the Next button runs step-specific validation and saves that step’s data (status stays draft).

On Step 1, the required fields are:

  • Job Title (Text Input)

  • Position Type (Multidropdown)

  • Location (Searchbox)

Job Title and Location can use Bubble’s “This input should not be empty” so they only show a red border after validation is triggered. The Multidropdown doesn’t have that option, so if I use value:count = 0 for the border color, it shows red immediately on page load.

I want the red border for the multidropdown to only appear after the user interacts with it or clicks Next without selecting a value. What’s the best way to handle this?

2

Add one more yes/no custom state “isInteracted”, defaulting to no, and when the input’s value changes OR the Next button is clicked set it to yes. Then show your red border when the count = 0 and the interacted was yes.

1 Like
3

Thank you Tyler!

1 Like