[thelist] FireFox doesn't do backgroundColor for checkboxesorradios?

Keith Gaughan keith at digital-crew.com
Wed Feb 9 08:16:55 CST 2005


Dave Merrill wrote:

> Agreed, IE's idea of this isn't exactly gorgeous.
> 
> OTOH, it isn't about aesthetics in this case. This is part of a form
> validation library, to highlight fields with entry problems (like not being
> filled in if required). If it's ugly for a minute, that's ok, as long as it
> points the user in the right direction. But it seems confusing to highlight
> some invalid fields and not others (like checkboxes and radios).
> 
> So what's the alternative? The library does support specifying other
> object(s) to highlight instead of the field itself. That's usually used to
> highlight additional fields according to validation spec'd for one, but I
> could make it a policy to always surround checkboxes and radios with a
> fieldset or span, and highlight that. Seems gross.
> 
> Another possibility is to abandon highlighting altogether, in favor of an
> icon or msg that gets inserted into the document, maybe to the right of the
> actual field. That can make a mess of a dense layout though. I could adopt a
> standard of always using a '<label for' on each field, and highlighting
> that. Anyone know if there's any css relation between a field and its
> '<label for'?

<tip title="How to find the label associated with a form element">
I always use the <label> tag in my client-side validation. It's the best
way to go anyway. Here's how I look for the label associated with the:

function GetLabelForId(id)
{
     var labels = document.getElementsByTagName('label');
     for (var i = 0; i < labels.length; i++)
     if (labels[i].htmlFor == id)
         return labels[i];
     return null;
}

This takes the id of the invalid field and searches for the label field 
associated with it though the "for" attribute.

This is a better visual indication of which fields are dodgy. Also, it 
doesn't clash with thing like the auto-fill in the Google toolbar.

I use a class called "bad" to indicate which ones didn't validate. When
it's going through each one of the form field, I clear this from the
list of classes assigned to the label. Then I validate the associated
field, and if it's invalid, append the class again.

You could speed this up by doing a search for all the labels associated
with all the fields to validate. My current validation library does a
scan for each as needed, which on particularly large forms could be
slow, (approximately n^2 scans: not nice), but the number of fields is
usually small enough for this not to make much of a difference.
</tip>

K.


More information about the thelist mailing list