El cambio de color de etiqueta HTML con javascript

Tengo un formulario que tengo que comprobar no hay entradas y cosas por el estilo. Ahora la forma de cambiar el color de los campos de formulario al rojo, pero la necesito para cambiar las etiquetas para que el rojo también. Ya que las etiquetas no son elementos de la forma actual de mi método es un poco difícil de cambiar las etiquetas así. Cualquier sugerencia me pueden implementar?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Test</title>
<script type="text/javascript">
    function validate(){
        var errors = new Array();
        for( var x = 0; x < 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 < 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;  
    }
</script>

<style type="text/css">
    #errors{
        color: #F00;
    }
    .in_error{
        background-color: #F00;
    }
</style>
</head>

<body>
<div id="errors"></div>
<form action="http://ingenio.us.com/examples/echo" method="post">
    <div class="mainContainer" style="width:650px; margin: 0 auto; text-align:center;">
        <div class="contactInfo" style="text-align:center; width:650px;">
            <fieldset>
                <legend style="text-align:left;">Contact Info</legend> 
                <label id="firstNameLabel" for="firstName">First Name: </label><input name="First Name" id="firstName" type="text" size="15" maxlength="15" />&nbsp;&nbsp;
                <label id="lastNameLabel" for="lastName">Last Name: </label><input name="Last Name" id="lastName" type="text" size="15" maxlength="15" />&nbsp;&nbsp;
                <label id="middleInitialLabel" for="middleInitial">Middle Initial: </label><input name="Middle Initial" id="middleInitial" type="text" size="4" maxlength="1" /><br /><br/>
                <label id="streetAddressLabel" for="streetAddress">Street Address: </label><input name="Street Address" id="streetAddress" type="text" size="58" maxlength="55" /> <br /><br />
                <label id="cityLabel" for="city">City: </label><input name="City" id="city" type="text" size="30" maxlength="28" />&nbsp;&nbsp;    
                <label id="stateLabel" for="state">State: </label>
                <select name="State" id="state">
                    <option></option>
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                </select>&nbsp;&nbsp; 
                <label name="zipLabel" for="zip">Zip: </label><input name="Zip" id="zip" type="text" size="7" maxlength="5" /><br /><br />
            </fieldset>
        </div><br /><br />
    </div>
  <div class="mainContainerTwo" style="width:450px; margin: 0 auto; text-align:center;">
        <div class="userInfo" style="text-align:center; width:450px;">
            <fieldset>
                <legend style="text-align:left;">User Info</legend>
                <label name="usernameLabel" for="username">Username: </label><input name="Username" id="username" type="text" size="20" maxlength="15" /><br /><br />
                <label name="passwordLabel" for="password">Password: </label><input name="Password" id="password" type="password" size="20" maxlength="15" /><br /><br />
                <label name="passwordConfirmLabel" for="passwordConfirm">Confirm Password: </label><input name="Confirm Password" id="passwordConfirm" type="password" size="20" maxlength="15" /><br /><br />
                <input type="submit" value="Submit" />
            </fieldset>
        </div>
  </div>

  </form>

</body>
</html>
Yo sugeriría que la simplificación de su ejemplo.

OriginalEl autor shinjuo | 2011-11-10

1 Kommentar

  1. 3

    Una solución rápida sería la que atraviesan desde el elemento de entrada para el hermano anterior, que en este caso es el elemento label. Después de que usted puede agregar clase in_error a su etiqueta de elemento.

    Agregue la siguiente línea de código dentro de los tres si-bloques

    document.forms[0].elements[x].previousSibling.className = "in_error";

    Entonces usted también debe cambiar su estilo CSS a la siguiente, en orden a establecer el color de fondo rojo para las entradas y el rojo como color de primer plano a las etiquetas.

    input.in_error{
        background-color: #F00;
    }
    
    label.in_error {
        color: #F00;
    }

    Hay ninguna razón por qué usted no está usando jQuery? Si no, yo sugiero que usted los tenga en uso. Esto hace que la manipulación del árbol DOM como este super fácil.

    +1 para la sugerencia sobre el uso de jquery
    Voy a través de un javascript libro primero. A continuación, me estoy moviendo en jquery

    OriginalEl autor rap1ds

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...