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>Lab06 - Form Validation</title>
<script type="text/javascript" charset="utf-8">



    function passcheck(){
        var pw1 = document.forms[ 0 ].password.value;
        var pw2 = document.forms[ 0 ].passcomf.value;

        if ( pw1 != pw2 ) {
            alert ("You did not enter the same new password twice. Please re-enter your password.");
            return false;
        }else{
            return true;
        }
    }


    function validate( ) {
        var errors = new Array( );

        for( var i = 0; i < document.forms[ 0 ].elements.length ; i++ ){

            if( document.forms[ 0 ].elements[ i ].type == "text" ) {
                if( document.forms[ 0 ].elements[ i ].value == "" ){
                    errors.push( "The " + document.forms[ 0 ].elements[ i ].name + " field cannot be blank.\n");

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



                }


            }

            if( document.forms[ 0 ].elements[ i ].type == "select-one") {
                if(document.forms[ 0 ].elements[ i ].selectedIndex == 0 ) {
                    errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');

                    document.forms[ 0 ].elements[ i ].className = "in_error";
                }
         }

            if( document.forms[ 0 ].elements[ i ].type == "select-one") {
                if(document.forms[ 0 ].elements[ i ].selectedIndex == 2 ) {
                    errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');

                    document.forms[ 0 ].elements[ i ].className = "in_error";
                }
         }







    }
        if( errors.length == 0 ) {
            return true;
        } else {
            clear_errors( );
            show_errors( errors );

            return false;
        }


    }



    function clear_errors( ){
        var div = document.getElementById( "errors" );
        while( div.hasChildNodes( ) ){
            div.removeChild( div.firstChild );
        }
    }

    function show_errors ( errors ) {
        var div = document.getElementById( "errors" );
        for( var i = 0; i < errors.length; i++ ){
            var error = document.createTextNode( errors[ i ] );
            var p = document.createElement( "p" );
            p.appendChild( error );
            div.appendChild( p );
        }
    }


    window.onload = function( ) {
        document.forms[ 0 ].onsubmit = validate;

    }



</script>


<style type="text/css" media="screen">
    #errors {
        color: #F00;
    }
    .in_error {
        background-color: #F00;
    }
    input:focus {
        background-color: #FFF;
    }
    select:focus {
        background-color: #FFF;
    }
</style>

</head>

<body>

    <h1>Form Validation</h1>

    <div id="errors"></div>

    <form action="" method="post" onsubmit="return passcheck()">
         <p>
            <label for="firstname" id="labelfirstname">First name:</label>
            <input type="text" name="First name" value="" id="firstname" />
        </p>
         <p>
            <label for="lastname" id="labellastname">Last name:</label>
            <input type="text" name="Last name" value="" id="lastname"/>
        </p>
         <p>
            <label for="middlei" id="labelmiddlei">Middle initial:</label>
            <input type="text" name="Middle initial" value="" id="middlei"/>
        </p>
         <p>
            <label for="address" id="labeladdress">Street address:</label>
            <input type="text" name="Street address" value="" id="address"/>
        </p>
         <p>
            <label for="city" id="labelcity">City:</label>
            <input type="text" name="City" value="" id="city"/>
        </p>
         <p>
            <label for="State" id="labelstate">State:</label>
            <input type="text" name="State" value="" id="state"/>
        </p>
         <p>
            <label for="zipcode" id="idzipcode">Zipcode:</label>
            <input type="text" name="Zipcode" value="" id="zipcode"/>
        </p>
         <p>
            <label for="username" id="labelusername">Username:</label>
            <input type="text" name="Username" value="" id="username"/>
        </p>
         <p>
            <label for="password" id="labelpassword">Password:</label>
            <input type="text" name="Password" value="" id="password"/>
        </p>
         <p>
            <label for="passcomf" id="labelpasscomf">Password comfirmation:</label>
            <input type="text" name="Password comfirmation" value="" id="passcomf"/>
        </p>
         <p>
            <label for="agreement" id="labelagreement">User Agreement</label>
            <select name="User Agreement" id="agreement">
                <option></option>
                <option>Yes, I agree!</option>
                <option>No, I do not agree!</option>
                </select>
        </p>
        <p><input type="submit" value="Register &rarr;" onclick="return passcheck(); return true;"/></p>
        </form>
</body>

    </html>

Answer 1

如果您在label元素之后移动input元素，则将它们放置float（或其他一些方法以使它们正确），然后你可以改变你的CSS以使用相邻的兄弟选择器来获得你的效果。这是css的测试样本：

input, select { float: right; clear: right; } label, .in_error:focus + label { color: black; } #errors, input.in_error + label { color: #F00; } .in_error { background-color: #F00; } input:focus { background-color: #FFF; } select:focus { background-color: #FFF; }

当然，缺点是html与label之后的input不符合逻辑顺序。除了javascript解决方案之外，我不知道如何在不重新排序元素的情况下使用纯CSS进行此操作。

标签行为匹配输入字段

1 个答案: