懸停

Question

我的HTML

<p id="login" onmouseover="showForm();" onmouseout="hideForm();"><span class="label">Login/Register</span> 
       <span id="loginForm">   
        <span class="form-elements"> 
        <span class="form-label">Name:</span> 
        <span class="form-field"> 
        <input type="text" id= "login1" onsubmit= "showform()"/> 
        </span> </span>   
        <span class="form-elements"> 
        <span class="form-label">Password:</span> 
        <span class="form-field"> 
        <input type="password" id= "password1" onsubmit= "showform()"/> 
        </span> </span>   
        <span class="form-elements"> 
        <span class="submit-btn"> 
        <input type="submit" value=" Submit " /></span> 
        <a href="register.html"><button type="button" class="swd-button">Register</button></a> 
       </span> 
       </span></p> 

我的JavaScript

function showForm(){ 
    document.getElementById('loginForm').style.display = "block"; 
} 

function hideForm(){ 
    document.getElementById('loginForm').style.display = "none"; 
} 

我的驗證檢查

var isValid = true; 
       var login1 = document.getElementById('login1').value; 
var password1 = document.getElementById('password1').value; 
       if(login1 == null ||login1 == "") 
       { 
        document.getElementById("errorusername").innerHTML="[Please type something!]"; 
        isValid = false; 
       } 

       if(password1 == null || password1 == "") 
       { 
        document.getElementById("errorpassword").innerHTML="[Please type something!]"; 
        isValid = false; 

       } 
       return isValid; 

什麼即時試圖做的是驗證用戶名和密碼驗證登錄名和密碼。這是用戶不能把null只。其他任何東西都可以接但是我的showform已經是一個函數。所以我在哪裏把我的驗證。以及我試圖把它放在showform()裏面，它似乎沒有工作

Answer 1

所以這裏是代碼，但你有一些你需要解決的問題。

function validate(){ 
    document.getElementById('failed').innerHTML = ""; 
    var isValid = true; 
    var login1 = document.getElementById('login1').value; 
    var password1 = document.getElementById('password1').value; 
    if(login1 == null ||login1 == "") 
    { 
     document.getElementById('login1').value="Type Something"; 
     isValid = false; 
    }; 

    if(password1 == null || password1 == "") 
    { 
     document.getElementById('failed').innerHTML = "NEED A PASSWORD!"; 
     isValid = false; 
    }; 
}; 

我改變你的HTML有點太......

<p id="login"><span class="label">Login/Register</span> 
<span id="loginForm">   
<span class="form-elements"> 
<span class="form-label">Name:</span> 
<span class="form-field"> 
<input type="text" id= "login1" onsubmit= "showform()"/> 
</span> </span>   
<span class="form-elements"> 
<span class="form-label">Password:</span> 
<span class="form-field"> 
<input type="password" id= "password1" onsubmit= "showform()"/> 
</span> </span>   
<span class="form-elements"> 
<span class="submit-btn"> 
<input type="submit" value="Submit" onclick="validate()" /></span> 
<a href="register.html"><button type="button" class="swd-button">Register</button></a> 
</span> 
</span><span id='failed' style="color:red;"></span></p> 

您不能設置密碼字段爲「輸入的東西」，因爲它只會顯示爲星號，因爲密碼字段被隱藏。因此，您需要某種外部元素來通知用戶需要密碼。這就是爲什麼我在最後添加span標籤的原因。

如果我是你，我會添加兩個通知缺少的文本在框外的字段本身......但這可能是我的偏好。

一件事...我不知道爲什麼你正在使用的跨度標籤，而不是一個表......這使得它真的很難讀...