When a select element isn’t a select element

When a select element isn’t a select element (javascript)

So let’s say you’re doing some quick javascript to validate input fields before form submission. You might gather all the elements you want to verify into an array, then loop through and apply some different logic to each element depending on the type (text input, textarea, checkbox, radio, etc.). We did this a while ago for .fc_required custom fields on checkout, but we forgot to include select elements. Our code looked like this (line breaks added for legibility):

if ( ( this.type == “text” || this.type == “textarea” ) && this.value == “”) {…}

That looks like it should. So, to add select box validation, you’d just add a check for this.value == “select”, right?

if ( ( this.type == “text” || this.type == “textarea” || this.type == “select” ) && this.value == “”) {…}

Wrong. Turns out, you need this:

if ( ( this.type == “text” || this.type == “textarea” || this.type == “select-one” ) && this.value == “”) {…}

So if you already knew that, good on ya. The types of a select element are select-one and select-multiple (for select boxes that can accept multiple selections at once). A bit more info is at JavascriptKit and DevGuru, but there’s not much more there than knowing that the type for a select element is not “select”.

So now you know, and knowing is half the battle.