Question

我有一个表单，我需要检查没有条目和类似的东西。现在，表单会将表单字段的颜色更改为红色，但我还需要将标签更改为红色。由于标签不是表单元素，因此我目前的方法也很难改变标签。我可以实施的任何建议吗？

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

Answer 1

快速修复将从输入元素遍历到前一个兄弟，在这种情况下是标签元素。之后，您可以将类in_error添加到label元素。

在三个if-blocks

中添加以下代码行

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

然后你还应该将CSS更改为以下内容，以便将红色背景颜色设置为输入，将红色前景颜色设置为标签。

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

label.in_error {
    color: #F00;
}

你有没有理由不使用jQuery？如果没有，我强烈建议你使用它。它使这样的DOM操作变得非常容易。

使用javascript更改HTML标签颜色

1 个答案: