Freelance Web Development

Redmond does it again. Thanks folks.

If you use CFinput validation on a text field with a style of display:none, you’ll run into problems with IE7.

Original Code:

<cfinput type="text" name="#attributes.name#"	required="#attributes.required#"
validate="#attributes.validate#"
message="#attributes.message#"	value="#attributes.value#"
style="display:none;">

After an invalid entry of a form field is made, ColdFusion displays the error message of your choice with generated JavaScript. Upon dismissing the alert, that JavaScript then places the system carat focus on the form field in question.

In a client’s form I had a hidden form field that would hold generated values. If that form field is blank upon submission, the page shows the validation error. And it works in Mac:Safari/Firefox and PC:IE5.5/IE6. What it does NOT work in is IE7. What happens is IE chokes on the fact that form field is hidden, so it freaks out about it and shows it’s own error, which stops your ColdFusion generated JavaScript, which contains the ‘return false’, which is supposed to stop the form from being processed.

Get the picture? Your form will be submitted even after validation fails. Nice.

Onto the fix
In order to not have CF give focus to this hidden form element, we have to change the default behavior of the JavaScript. So take out the message attribute, and replace it with onError, like so:

<cfinput type="text" name="#attributes.name#"
	required="#attributes.required#"
	validate="#attributes.validate#"
	onError="alert(unescape('#urlencodedformat(attributes.message)#')); return false;"
	value="#attributes.value#"
	style="display:none;"
>

Now if the field is invalid an alert will be shown, but no focus() command will get executed. The return false simply hualts the form submission.

The only downside to this is that you’ll get an alert box for each invalid item (only one at a time though), whereas CFInput’s default action puts them all together into one alert box.
Expanding on this, you can create a JavaScript to compile all error messages… but jeez… what’s the point of CFInput then?

IE. It’s almost as bad as Safari.

ColdFusion, JavaScript