title: Changing HTML label color with javascript
body: <p>I have a form that I need to check for no entries and things like that. Right now the form will change the color of the form fields to red but I need it to change the labels to red also. Since labels are not form elements my current method is making it a tad difficult to change the labels as well. Any suggestions I can implement?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Form Test&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
      function validate(){
          var errors = new Array();
          for( var x = 0; x &lt; document.forms[0].elements.length; x++ ){
              if( document.forms[0].elements[x].type == "text" ){
                  if( document.forms[0].elements[x].value == "" ){
                      errors.push("The " + document.forms[0].elements[x].name + " field cannot be blank.\n");
                      document.forms[0].elements[x].className = "in_error";
  
                  }
              }
              if( document.forms[0].elements[x].type == "select-one" ){
                  if( document.forms[0].elements[x].selectedIndex == 0 ){
                      errors.push( "The " + document.forms[0].elements[x].name + " field cannot be blank.\n" );
                      document.forms[0].elements[x].className = "in_error";
                  }
              }
              if( document.forms[0].elements[x].type == "password" ){
                  if( document.forms[0].elements[x].value == ""){
                      errors.push( "The " + document.forms[0].elements[x].name + " field cannot be blank.\n" );
                      document.forms[0].elements[x].className = "in_error";
                  }
              }
          }
  
          if( errors.length == 0 ){
              return true;    
          }else{
              clear_errors( errors );
              show_errors( errors );
              return false;
          }
      }
      function clear_errors( errors ){
          var div =  document.getElementById( "errors" );
          while( div.hasChildNodes() ){
              div.removeChild(div.firstChild);    
          }
  
  
      }
      function show_errors( errors ){
          var div = document.getElementById( "errors" );
          for(var x = 0; x &lt; errors.length; x++){
              var error = document.createTextNode( errors[x] );
              var p = document.createElement( "p" );
              p.appendChild( error );
              div.appendChild( p )
          }
      }
  
      window.onload = function( ){
          document.forms[0].onsubmit = validate;  
      }
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
      #errors{
          color: #F00;
      }
      .in_error{
          background-color: #F00;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="errors"&gt;&lt;/div&gt;
  &lt;form action="http://ingenio.us.com/examples/echo" method="post"&gt;
      &lt;div class="mainContainer" style="width:650px; margin: 0 auto; text-align:center;"&gt;
          &lt;div class="contactInfo" style="text-align:center; width:650px;"&gt;
              &lt;fieldset&gt;
                  &lt;legend style="text-align:left;"&gt;Contact Info&lt;/legend&gt; 
                  &lt;label id="firstNameLabel" for="firstName"&gt;First Name: &lt;/label&gt;&lt;input name="First Name" id="firstName" type="text" size="15" maxlength="15" /&gt;&amp;nbsp;&amp;nbsp;
                  &lt;label id="lastNameLabel" for="lastName"&gt;Last Name: &lt;/label&gt;&lt;input name="Last Name" id="lastName" type="text" size="15" maxlength="15" /&gt;&amp;nbsp;&amp;nbsp;
                  &lt;label id="middleInitialLabel" for="middleInitial"&gt;Middle Initial: &lt;/label&gt;&lt;input name="Middle Initial" id="middleInitial" type="text" size="4" maxlength="1" /&gt;&lt;br /&gt;&lt;br/&gt;
                  &lt;label id="streetAddressLabel" for="streetAddress"&gt;Street Address: &lt;/label&gt;&lt;input name="Street Address" id="streetAddress" type="text" size="58" maxlength="55" /&gt; &lt;br /&gt;&lt;br /&gt;
                  &lt;label id="cityLabel" for="city"&gt;City: &lt;/label&gt;&lt;input name="City" id="city" type="text" size="30" maxlength="28" /&gt;&amp;nbsp;&amp;nbsp;    
                  &lt;label id="stateLabel" for="state"&gt;State: &lt;/label&gt;
                  &lt;select name="State" id="state"&gt;
                      &lt;option&gt;&lt;/option&gt;
                      &lt;option value="AL"&gt;Alabama&lt;/option&gt;
                      &lt;option value="AK"&gt;Alaska&lt;/option&gt;
                      &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
                      &lt;option value="AR"&gt;Arkansas&lt;/option&gt;
                      &lt;option value="CA"&gt;California&lt;/option&gt;
                      &lt;option value="CO"&gt;Colorado&lt;/option&gt;
                      &lt;option value="CT"&gt;Connecticut&lt;/option&gt;
                      &lt;option value="DE"&gt;Delaware&lt;/option&gt;
                      &lt;option value="FL"&gt;Florida&lt;/option&gt;
                      &lt;option value="GA"&gt;Georgia&lt;/option&gt;
                      &lt;option value="HI"&gt;Hawaii&lt;/option&gt;
                      &lt;option value="ID"&gt;Idaho&lt;/option&gt;
                      &lt;option value="IL"&gt;Illinois&lt;/option&gt;
                      &lt;option value="IN"&gt;Indiana&lt;/option&gt;
                      &lt;option value="IA"&gt;Iowa&lt;/option&gt;
                      &lt;option value="KS"&gt;Kansas&lt;/option&gt;
                      &lt;option value="KY"&gt;Kentucky&lt;/option&gt;
                      &lt;option value="LA"&gt;Louisiana&lt;/option&gt;
                      &lt;option value="ME"&gt;Maine&lt;/option&gt;
                      &lt;option value="MD"&gt;Maryland&lt;/option&gt;
                      &lt;option value="MA"&gt;Massachusetts&lt;/option&gt;
                      &lt;option value="MI"&gt;Michigan&lt;/option&gt;
                      &lt;option value="MN"&gt;Minnesota&lt;/option&gt;
                      &lt;option value="MS"&gt;Mississippi&lt;/option&gt;
                      &lt;option value="MO"&gt;Missouri&lt;/option&gt;
                      &lt;option value="MT"&gt;Montana&lt;/option&gt;
                      &lt;option value="NE"&gt;Nebraska&lt;/option&gt;
                      &lt;option value="NV"&gt;Nevada&lt;/option&gt;
                      &lt;option value="NH"&gt;New Hampshire&lt;/option&gt;
                      &lt;option value="NJ"&gt;New Jersey&lt;/option&gt;
                      &lt;option value="NM"&gt;New Mexico&lt;/option&gt;
                      &lt;option value="NY"&gt;New York&lt;/option&gt;
                      &lt;option value="NC"&gt;North Carolina&lt;/option&gt;
                      &lt;option value="ND"&gt;North Dakota&lt;/option&gt;
                      &lt;option value="OH"&gt;Ohio&lt;/option&gt;
                      &lt;option value="OK"&gt;Oklahoma&lt;/option&gt;
                      &lt;option value="OR"&gt;Oregon&lt;/option&gt;
                      &lt;option value="PA"&gt;Pennsylvania&lt;/option&gt;
                      &lt;option value="RI"&gt;Rhode Island&lt;/option&gt;
                      &lt;option value="SC"&gt;South Carolina&lt;/option&gt;
                      &lt;option value="SD"&gt;South Dakota&lt;/option&gt;
                      &lt;option value="TN"&gt;Tennessee&lt;/option&gt;
                      &lt;option value="TX"&gt;Texas&lt;/option&gt;
                      &lt;option value="UT"&gt;Utah&lt;/option&gt;
                      &lt;option value="VT"&gt;Vermont&lt;/option&gt;
                      &lt;option value="VA"&gt;Virginia&lt;/option&gt;
                      &lt;option value="WA"&gt;Washington&lt;/option&gt;
                      &lt;option value="WV"&gt;West Virginia&lt;/option&gt;
                      &lt;option value="WI"&gt;Wisconsin&lt;/option&gt;
                      &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
                  &lt;/select&gt;&amp;nbsp;&amp;nbsp; 
                  &lt;label name="zipLabel" for="zip"&gt;Zip: &lt;/label&gt;&lt;input name="Zip" id="zip" type="text" size="7" maxlength="5" /&gt;&lt;br /&gt;&lt;br /&gt;
              &lt;/fieldset&gt;
          &lt;/div&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
    &lt;div class="mainContainerTwo" style="width:450px; margin: 0 auto; text-align:center;"&gt;
          &lt;div class="userInfo" style="text-align:center; width:450px;"&gt;
              &lt;fieldset&gt;
                  &lt;legend style="text-align:left;"&gt;User Info&lt;/legend&gt;
                  &lt;label name="usernameLabel" for="username"&gt;Username: &lt;/label&gt;&lt;input name="Username" id="username" type="text" size="20" maxlength="15" /&gt;&lt;br /&gt;&lt;br /&gt;
                  &lt;label name="passwordLabel" for="password"&gt;Password: &lt;/label&gt;&lt;input name="Password" id="password" type="password" size="20" maxlength="15" /&gt;&lt;br /&gt;&lt;br /&gt;
                  &lt;label name="passwordConfirmLabel" for="passwordConfirm"&gt;Confirm Password: &lt;/label&gt;&lt;input name="Confirm Password" id="passwordConfirm" type="password" size="20" maxlength="15" /&gt;&lt;br /&gt;&lt;br /&gt;
                  &lt;input type="submit" value="Submit" /&gt;
              &lt;/fieldset&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>