object.style.backgroundColor = colorValue;

The value of colorValue can be any color value. The backgroundColor property is supported by Navigator 4 and Internet Explorer 4 (and above). However, it cannot be associated with form elements in Netscape Navigator. Therefore, our form validation script works with both browsers, but only colors the invalid text fields in Internet Explorer:

<SCRIPT LANGUAGE="JavaScript">
<!--

function setColor(el, bg) {
  if (el.style) el.style.backgroundColor = bg;
}

function checkInput(form) {
  var bgBad = "#cccc99";
  var bgGood = "white";
  var valid = true;
  if (form.first.value == "") {
    valid = false;
    setColor(form.first, bgBad);
  } else {
    setColor(form.first, bgGood);
  }
  if (form.last.value == "") {
    valid = false;
    setColor(form.last, bgBad);
  } else {
    setColor(form.last, bgGood);
  }
  if (!valid) alert("Please fill out the entire form.");
  return valid;
}

// -->
</SCRIPT>
<FORM onSubmit="return checkInput(this)">
First name: <INPUT TYPE="text" NAME="first" SIZE="30" VALUE=""><BR>
Last name: <INPUT TYPE="text" NAME="last" SIZE="30" VALUE=""><BR>
<INPUT TYPE="submit" VALUE="send">
</FORM>

If you're using Internet Explorer 4 (or above), give it a try:

People who read this tip also read these tips:

• Dos and Donts for Filters
• Updating Existing Text
• Changing the Cursor
• Removing Paragraphs on the Fly
• Coloring the Scrollbar's 3D Light