Изменение цвета метки HTML с помощью JavaScript - PullRequest
Новая
       12

Изменение цвета метки HTML с помощью JavaScript

0 голосов
/ 10 ноября 2011

У меня есть форма, которую мне нужно проверить на отсутствие записей и тому подобное. Прямо сейчас форма изменит цвет полей формы на красный, но мне также нужно поменять метки на красный. Поскольку метки не являются элементами формы, мой текущий метод также затрудняет их изменение. Любые предложения, которые я могу реализовать? 

<!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>

1 Ответ

3 голосов
/ 11 ноября 2011

Быстрое исправление будет проходить от элемента ввода к предыдущему брату, который в этом случае является элементом метки. После этого вы можете добавить класс in_error к элементу метки.

Добавьте следующую строку кода в три блока if 

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

Затем вы должны также изменить свой CSS на следующий, чтобы установить красный цвет фона для входных данных и красный цвет переднего плана для меток. 

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

label.in_error {
    color: #F00;
}

Есть ли причина, по которой вы не используете jQuery? Если нет, я настоятельно рекомендую вам использовать его Это делает манипулирование DOM таким простым.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...