Previous Message
Next Message

Can CSS Be Used In Conjunction With JS To Provide Form Validation?

Sent by Ben Henick on 9 January 2004 22:10


On Fri, 9 Jan 2004, CSS LIST EMAIL wrote:

> What I'd like to do is provide a visual method of which fields are required,
> which I am pretty sure I've got down now.  I have a thin red border around
> the fields, as well as an asterisk and bold face labels for those required
> fields.  But, for SELECT elements, CHECKBOX and RADIO buttons - I don't know
> what to do.

The 3d parts of those elements are not (unfortunately) exposed to valid 
CSS in any browser of which I'm aware...

> Also, more importantly, once the JavaScript does the validation - how can I
> change the bad entry, visually, using a different style.  Maybe something
> like a totally red background in a text box?  Or a GIF next to the label...
> Something like that.   Basically, I am not sure how I'd dynamically switch
> the style of the bad field.   That's what I'd really looking to do.

Each of your fields has a name attached.  So:

document.forms[0].elements["someElement"].style.foo = "someValue";

should do the trick.

You may want instead to work with your form element *labels*, which is 
somewhat more of a challenge.

Let's suppose that you've assigned a class to each of your labels, for 
example:

#myForm .labelClass {
  background-color: white;
  color: black;
}

Thus:

var formReference = document.getElementById("myForm").firstChild;
do {
  if ((formReference.className == "labelClass") && (inputError)) {
    // where inputError likely represents the result of a test against
    // an array value...
    formReference.style.color = "red"; }
    // for example...
  formReference = formReference.nextSibling; }
while {
  formReference !== null; }


HTH,
-- 
Ben Henick                     "In the long run, men hit only what they aim
Web Author At-Large             at.  Therefore, though they should fail
http://www.io.com/persist1/     immediately, they had better aim high."
[EMAIL-REMOVED]                 -- Henry David Thoreau


______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: