Menu icon Foundation
Abide form validation for dropdown

How can I go about generating an error except when birds is chosen? I can't find this written anywhere. It is very similar to the example on the Abide foundation Docs page, but that example code is incomplete.

<form data-abide>
	<label>What flies in the sky?<small>Required</small></label> 
	<select required> 
	    <option value="houses">houses</option> 
		<option value="birds">birds</option> 
		<option value="trains">trains</option> 
		<option value="bears">bears</option> 
	</select>
    <small class="error">Please choose the correct answer.</small> 
	<button type="submit">Submit</button>
</form>

abidevalidationdropdown

How can I go about generating an error except when birds is chosen? I can't find this written anywhere. It is very similar to the example on the Abide foundation Docs page, but that example code is incomplete.

<form data-abide>
	<label>What flies in the sky?<small>Required</small></label> 
	<select required> 
	    <option value="houses">houses</option> 
		<option value="birds">birds</option> 
		<option value="trains">trains</option> 
		<option value="bears">bears</option> 
	</select>
    <small class="error">Please choose the correct answer.</small> 
	<button type="submit">Submit</button>
</form>

This post has been closed. No new replies can be added.

Alex Smith over 5 years ago

Hi Rick,

Taking a look at the docs source code (not the provided example code) I can see that the value in the first option is empty.

Example:

<option value="">Select grocery item</option>

So I took the code you provided and removed all values except for the one that has birds as the value.

<option value="">houses</option> 
<option value="birds">birds</option> 
<option value="">trains</option> 
<option value="">bears</option> 

Then I tested this in a browser and received an error for every option selected except when selecting birds.

My only disclaimer is that I have no idea if this is the recommended way or if your form is built dynamically where values are automatically added, etc. I can only say that in my test, by removing the values for the wrong answers and only providing a value for the right answer, I was able to accomplish the outcome you're looking for.

Hope that helps!

Rick Rakin over 5 years ago

Thanks Alex. worked perfectly. You are awesome!