ラベル動作が入力フィールドに一致する

以下は私のコードですが、ラベル名が私のフィールドが現在行っている動作と一致する場所に移動する必要があります。何も入力しなければ、フィールドは赤い背景に変わります。フォーカスされている場合は、白に戻ります。私は、フィールドの色と一致し、同じ動作に一致するラベルのフォントの色が必要です。

    

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


</head>

<body>

    

Form Validation

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

    <form action="" method="post" onsubmit="return passcheck()">
         
<input type="text" name="First name" value="" id="firstname" />
<input type="text" name="Last name" value="" id="lastname"/>
<input type="text" name="Middle initial" value="" id="middlei"/>
<input type="text" name="Street address" value="" id="address"/>
<input type="text" name="City" value="" id="city"/>
<input type="text" name="State" value="" id="state"/>
<input type="text" name="Zipcode" value="" id="zipcode"/>
<input type="text" name="Username" value="" id="username"/>
<input type="text" name="Password" value="" id="password"/>
<input type="text" name="Password comfirmation" value="" id="passcomf"/>

<input type="submit" value="Register →" onclick="return passcheck(); return true;"/> </form> </body> </html>
3

1 答え

input 要素の後に label 要素を移動する場合は、 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は input のあとに label という論理的な順序ではありません。 javascriptのソリューション以外では、要素を並べ替えることなく純粋なCSSを使ってそれを行う方法を認識していません。

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript