1

私が間違いを犯している可能性がある場所を誰かが見ることができますか? フォームのテキスト ボックスの背景色は、もともと灰色に設定されています。ユーザーが間違いを犯した場合は、赤い枠で黄色に変えたいと思います。フォームが正しく入力されていない場合、フォームはサーバーに送られません。しかし、cssは変更されません。js 呼び出しをコメントアウトすると、サーバーに投稿されます。スニペットは次のとおりです。

CSS:

  .invalid{
background-color:#ff9;
border: 2px red inset;
}

   .reqd{
background-color:#222222; 
color:#555555; border-style: solid; 
border-color:#555555; 
border-width: 1px;
 }

HTML:

<!DOCTYPE html>
  <?php 
  // Debug
   error_reporting(E_ALL);
  ?>

<html lang="en">
 <head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/regauth.js"></script>

    <title></title>
 </head>
 <body id="registerBody">
<section id="registerBox">

    <form id="registerForm" method="post" action="regauth.php">
    <p>Welcome to the atlas registraton! Please fill out the information below.</p>
    <br>
    <p><label for="firstName">First Name:&nbsp;&nbsp;<input type="text" size="30" id="firstName" name="firstName" class="reqd"></label></p>
    <p><label for="lastName">Last Name:&nbsp;&nbsp;<input type="text" size="30" id="lastName" name="lastName" class="reqd"></label></p>
    <p><label for="email">Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="30" id="email" name="email" class="reqd"></label></p>
    <br>
    <br>
    <p><label for="reqUsername">Username:&nbsp;&nbsp;<input type="text" size="30" id="reqUsername" name="reqUsername" class="reqd"></label></p>
    <p><label for="passOne">Password:&nbsp;&nbsp;<input type="password" size="30" id="passOne" name="passOne" class="reqd"></label></p>
    <p><label for="passTwo">Confirm Password:&nbsp;&nbsp;<input type="password" size="30" id="passTwo" name="passTwo" class="reqd"></label></p>
    <br>
    <br>
    <p><input type="submit" value="Submit">&nbsp;&nbsp;<input type="reset" value="Reset Form" class="reset"></p>

    </form> 
</section>
<script type="text/javascript">
$("#registerBox").css("margin-left", ($(window).width()-425)/2);
$("#registerBox").css("margin-top", ($(document).height()-500)/2);
$('#registerBox').fadeIn(1500);
</script>

   </body>

    </html>

JS (regauth.js): Tom Negrino 提供、ビジュアル クイックスタート ガイド: Javascript 第 8 版

window.onload = initForms;

//Function loops through each form. For each one it adds an event handler to that forms 'onSubmit'.
function initForms() {
for (var i = 0; i < document.forms.length; i++) {
    document.forms[i].onsubmit = validForm;
     }
   }

function validForm() {
var allGood = true;
var allTags = document.getElementsByTagName("*");

for (var i = 0; i < allTags.length; i++) {
    if (!validTag(allTags[i])) {
        allGood = false;
    }
}
return allGood;

function validTag(thisTag) {
    var outClass = "";
    var allClasses = thisTag.className.split(" ");

    for (var j = 0; j < allClasses.length; j++) {
        outClass += validBasedOnClass(allClasses[j]) + " ";
    }
    thisTag.className = outClass;

    if (outClass.indexOf("invalid") > -1) {
        thisTag.focus();
        if (thisTag.nodeName == "INPUT") {
            thisTag.select();
        }
        return false;
    }
    return true;

    function validBasedOnClass(thisClass) {
        var classBack = "";

        switch (thisClass) {
            case "":
            case "invalid":
                break;
            case "reqd":
                if (allGood && thisTag.value == "") {
                    classBack = "invalid ";
                }
                classBack += thisClass;
                break;
            default:
                classBack += thisClass;
        }
        return classBack;
    }
}

}

4

1 に答える 1

0

「無効な」CSS ブロックを「必須」の CSS ブロックの後に移動します。

CSS のルールは、「最後のルールが勝つ」というものです (ちょっと複雑ですが、この場合はそれが問題です)。

「無効」ルールは無効な要素に適用されますが、「reqd」ルールには背景色があり、「無効」ルールの後にあるため、その設定が適用されます。

于 2012-06-30T20:51:16.823 に答える