CSS問題：Javascript密碼驗證消息放置錯誤

我正在使用this link for password match validation。所有工作都很好。但問題是，我在字段頂部收到消息，而不是在確認密碼字段旁邊。在這裏，我嘗試了;CSS問題：Javascript密碼驗證消息放置錯誤

JavaScript函數

function checkPass(){ 
    var password = document.getElementById('password'); 
    var password2 = document.getElementById('password2');    
    var message = document.getElementById('confirmMessage'); 
    var goodColor = "#66cc66"; 
    var badColor = "#ff6666"; 

    if(password.value == password2.value){ 
     password2.style.backgroundColor = goodColor; 
     message.style.color = goodColor; 
     message.innerHTML = 'Passwords Match!'    
    }else{ 
     //The passwords do not match. 
     //Set the color to the bad color and 
     //notify the user. 
     password2.style.backgroundColor = badColor; 
     message.style.color = badColor; 
     message.innerHTML = 'Passwords Do Not Match!' 
    } 
}

HTML

<div id="wrapper"> 
    <form name="form" id="form" class="form" onsubmit="someFunction(this);return false"> 
     <label for="password">Password:</label><input type="password" style="color: #B8B894;" value="Password" onblur="if(this.value == '') { this.value='Password'}" onfocus="if (this.value == 'Password') {this.value=''}" name="password" id="password" /> 
     <label for="password2">Confirm Pass:</label><input type="password" name="password2" id="password2" onkeyup="checkPass(); return false;" /> 
     <span id="confirmMessage" class="confirmMessage"></span><br/> 
     <input type="submit" value="Submit" class="submit" /> 
     <input type="button" name="reset_form" value="Reset All Fields " onclick="this.form.reset();"> 
    </form> 
</div>

CSS

<style type="text/css"> 
    #wrapper {width:75%; margin:70px auto} 
    .form {float:left; padding:0 139px 10px 10px; background:#f3f3f3; border:2px solid #cfcfcf width: 100%;} 
    .form label {float:left; width:100px; padding:10px 10px 0 0; font-weight:bold font:12px Verdana, Arial, Helvetica, sans-serif; color:#666} 
    .form select {float:left; width:146px; margin-top:10px} 
    .form input {float:left; margin-top:10px} 
    .form .submit {clear:both} 
    .form #confirmMessage {font-size: 0.9em; margin:5px; padding:10px 10px;} 
    .form input.password {font:normal normal normal 1em verdana,arial,sans-serif; padding:4px 6px 3px 6px; border:1px solid #ccc; border-top-color:#aaa; border-bottom-color:#ddd; cursor:text; width:286px; -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);} 
    #msg {display:none; position:absolute; z-index:200; background:url(images/msg_arrow.gif) left center no-repeat; padding-left:7px} 
    #msgcontent {display:block; background:#f3e6e6; border:3px solid #924949; border-left:none; padding:5px; min-width:150px; max-width:250px} 
</style>

結果呈現像下面的圖片;

這是怎麼解決的？

編輯：我忘了把我的問題#wrapper放在CSS中。我現在在我的問題中添加了。

編輯＃2：現在我把我的<style>標籤之間的一切。請幫助。

來源

2012-04-21 AbdulAziz

當我嘗試此操作時，屏幕截圖與結果不符;必須有更多的CSS參與。而且你的css中有一個錯字（你錯過了一個'＃'），但是這並不能解決問題。 – 2012-04-21 13:10:21

對不起。檢查我編輯的問題。謝謝 – AbdulAziz 2012-04-21 13:35:24

有了額外的CSS，這裏的結果仍然看起來不像你的截圖。它看起來像[this]（http://i5.photobucket.com/albums/y170/Mr_Lister/passmatch.png）。你可以禁用你的樣式表，看看你的頁面看起來像什麼嗎？ – 2012-04-21 13:47:52

現在，您正在將所有內容都浮動到左側，因此跨度不知道應該到達的位置。
如果您使用的是來自網頁的代碼，則表示您已獲得代碼，但這不會發生。

無論如何，我刪除了一些浮點數和一些在你的css中的錯誤，現在看起來像這樣。

#wrapper {width:75%; margin:70px auto} 
.form {padding:0 10px 10px 10px; background:#f3f3f3; border:2px solid #cfcfcf;} 
.form label {display:inline-block; width:100px; margin:10px 0; 
    font:bold 12px Verdana, Arial, Helvetica, sans-serif; color:#666} 
.form select {float:left; width:146px; margin-top:10px} 
.form .submit {clear:both} 
.form #confirmMessage {font-size: 0.9em;}

我還在第一個input後面加了一個<br>。結果就像this jsFiddle。

來源

2012-04-22 07:20:57

CSS問題：Javascript密碼驗證消息放置錯誤

回答

相關問題