Entries Tagged as '<CFSELECT>'

Making CFSELECT REQUIRED Work for Single Row Select

<CFSELECT> 1 Comment »

My wife needed to make the CFSELECT (not multiline) REQUIRED=”yes” to work for a CFFORM she is working on.  I don’t know how you get around that not working properly, but I wrote a quick JavaScript work around for that a long time ago and couldn’t find it easily, so I’m posting it here.  (That's why I started this blog in the first place.)

Anyway.

The problem is that REQUIRED=”YES” is already satisfied when the page loads, so the JavaScript that CF writes is never triggered.  This is pretty easy to work around.  All you have to do is put a script at the bottom of the page that sets the value for selectedIndex to -1, so the JavaScript that CF writes sees it as "not selected" and then triggers properly.

If the CF Select looks something like this:

<cfselect 
	required 	="yes"
	message 	="Yay!"
	name 			="select1"
	id 				="select1"	
	>
	<option value="1">TEST 1</option>
	<option value="2">TEST 2</option>
</cfselect>

Then the JavaScript at the bottom of the page should look something like this:

<script type="text/javascript">

document.getElementById('select1').selectedIndex = -1;
	
</script>

That’s it!  Easy, eh?

Powered by Mango Blog. Initial Template Design and Icons by N.Design Studio, modified by Michael Cummins.
RSS Feeds