Personal Website of Yakov Shafranovich

« If you Don’t Get Elected … Sue! Cross Site Scripting via RSS? »

Validating SELECT Boxes in JavaScript

Posted October 21, 2004 – 6:07 pm by Yakov Shafranovich in Programming

One of the more boring tasks in DHTML is validation of form data and specifically of INPUT and SELECT boxes. Since both have a “.value” property, we can save time and use the same code for checking both:

if(selectBox.value == null || selectBox.value.length == 0)

{ alert(’Nothing selected in select box!’); }

else { alert(’Selected value = ‘ + selectBox.value); }

An example is right here:

Test Box 0 :

Unfortunatly an ugly suprise is in store for you if happen to be from the 90% majority that uses Microsoft’s Internet Explorer - the example above WILL NOT WORK for you and will always return “Nothing selected…” message. But it will work perfectly in Opera and Firefox. To find out why this happens, we need to dig deeper.

In the example above I used the following code for the SELECT box:

<select ID=”testBox”>

<option/>

<option>111<option>

<option>222</option>

</select>

If you notice carefully, the VALUE attribute is not used. The reason why I did that is because of the HTML 4 specification that defines the VALUE attribute of OPTION tags as follows:

This attribute specifies the initial value of the control. If this attribute is not set, the initial value is set to the contents of the OPTION element.

So by default the “value” property will be set to whatever text appears inside the OPTION element, if no VALUE attribute is used. However, on IE if you examine the value property of the select box, it will always stay empty. In other words, Microsoft has failed to follow the HTML 4 specification. Digging into their documentation, brings up the following little snippet about the VALUE attribute:

This property is defined in HTML 3.2 and is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1.

IE is following the HTML 3.2 standard which is dated “14-Jan-1997″ on W3C’s site, making it 7 years old! Additionally, their reference to DOM1 is problematic because the DOM1 standard starts off as follows:

This section extends the Level 1 Core API to describe objects and methods specific to HTML documents [HTML 4.0].

It references HTML 4 directly, which you can see by going to the section defining the OPTION object. So, to sum it up Microsoft is stuck in the 1997 world without support for this specific standard. Given that Microsoft employees are listed on the the DOM1 specification, AND the HTML4 standard is dated “24 December 1999″, leaving this for 6 years is simply unacceptable. And then Microsoft wonders why so many people are switching for Firefox?

But in any case, what would be the solution for Internet Explorer? Two options are possible, either using the “selectedIndex” property of the SELECT box and checking that it is not set to -1 OR setting the VALUE attributes of the select boxes. Here is the first option via the “selectedIndex” property:

if(selectBox1.selectedIndex == -1)

{ alert(’Nothing selected in select box!’); }

else { alert(’Selected value = ‘ + selectBox1.value); }

You can test this right here:

Test Box 1 :

I personally prefer the second option using the VALUE attributes of the OPTION tags, since it allows me to use the same type of validation for both input fields and select boxes. The SELECT box would need to be changed as follows:

<select ID=”testBox”>

<option/>

<option VALUE=”111″>111<option>

<option VALUE=”222″>222</option>

</select>

But the JavaScript code remains the same as my original example all the way on top :

if(selectBox3.value == null || selectBo3x.value.length == 0)

{ alert(’Nothing selected in select box!’); }

else { alert(’Selected value = ‘ + selectBox3.value); }