Severity:
Medium
Context:
A form contains a required dropdown field (e.g., “Country”). The placeholder/default option (“Select your country”) is selectable, but users might not actually choose a real value.
Steps to Reproduce:
- Go to the form with a required dropdown field (e.g., “Country”).
- Do not change the dropdown (leave default option like “Select your country”).
- Click Submit.
Expected Result:
- Validation error appears:
“Please select your country.”
Actual Result:
- Form submits successfully.
- The default option (placeholder) gets interpreted as a real value.
Root Cause:
The placeholder option like “Select your country” has an actual value in HTML (e.g., “default” or even a blank “”).
If the backend or validation logic doesn’t explicitly reject it, it passes.
Impact:
- Bad data sent to server
- Inaccurate analytics
- Poor UX
- Harder to segment or personalize content based on country
Suggested Fix:
Add disabled and selected attributes to the placeholder option:
<option value=”” disabled selected>Select your country</option>
Validate that the chosen value ≠ “”.
Lesson learnt:
“Just because something is selected doesn’t mean it was chosen”
Let’s connect! I share common bugs, solutions, and QA tips regularly.