November 30, 1999 - Coloring Text Fields | WebReference

November 30, 1999 - Coloring Text Fields

Yehuda Shiran November 30, 1999
Coloring Text Fields
Tips: November 1999

Yehuda Shiran, Ph.D.
Doc JavaScript

The popular background-color CSS property is implemented in JavaScript as backgroundColor. The following syntax can be used to change the background color of an element:

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:

First name:
Last name: