隱藏/顯示驗證表單問題

Question

我想做一個簡單的驗證表，但是我不能解決一個小錯誤。 單擊登錄元素后，我希望顯示一個login_window（從display：none更改為display：block）之后，我希望顯示登錄名和密碼輸入。 當我用“用戶名”和“密碼”以外的任何內容填充時，它應該顯示警報消息。 取而代之的是，即使沒有表單，它也會繼續隱藏login_window（我只是單擊提交，而login_window被隱藏了）

HTML：

<div id="login_window">
    <form name="login_form" onsubmit="return validate_login()" method="post">
        <label>Login</label>
        <input type="text" name="usr" placeholder="username"><br>
        <label>Sign In</label>
        <input type="text" name="psw" placeholder="password"><br>
        <input type="submit" value="Submit">
    </form>
</div>

CSS：

#login {
    position:absolute;
    width:65px;
    height:26px;
}


#login_window {
    position:absolute;
    width:400px;
    height:460px;
    background-color:#F0F0F0  ;
    z-index:2;
}

JS：

var login = document.getElementById("login");
var login_window = document.getElementById("login_window");
login_window.style.display = "none";

login.addEventListener("click",function(){    
    login_window.style.display = "block";
});


function validate_login(){
    var un = document.login_form.usr.value;
    var pw = document.login_form.psw.value;                                           
    var username = "username";
    var password = "password";
    if((un == username) && (pw == password)){
        return true;
    }else{
        alert("Login was unsuccesful, please enter the corrent name and password.");
        return false;
    }    
}

這是小提琴

即使它在小提琴中的工作方式與在瀏覽器中的工作方式不同，但我還是有兩個問題。

1）為什么每次單擊提交時，login_window都一直隱藏？

2）為什么我的驗證表格不起作用？

謝謝

Answer 1

如果將函數移到主體上以便在調用時可用，那么它將起作用。

演示版

No wrap - in <body>

另外，請修復您的逗號接頭 。 為什么程序員如此喜歡在警報消息中使用它們？ :-)

隱藏/顯示驗證表單問題

問題描述

1 個解決方案

解決方案1
0 已采納 2014-10-08 16:37:59

隱藏/顯示驗證表單問題

問題描述

1 個解決方案

解決方案1 0 已采納 2014-10-08 16:37:59

解決方案1
0 已采納 2014-10-08 16:37:59