JavaScript驗證表格不能正常工作

我試圖驗證我的表單，以便如果用戶沒有輸入用戶名或密碼，他不允許登錄到網站。出於某種原因，當我輸入用戶名和密碼字段並單擊登錄時，login.html頁面不會顯示。任何幫助？JavaScript驗證表格不能正常工作

<script> 
 
    window.onload = function(){ 
 
     function handleinput(){ 
 
      if(document.loginform.username.value == ""){ 
 
       document.getElementById("usernameError").innerHTML = "You must enter a username"; 
 
       return false; 
 
      } 
 
     
 
      if(document.loginform.password.value == ""){ 
 
       document.getElementById("passwordError").innerHTML = "You must enter a password"; 
 
       return false; 
 
      } 
 
     } 
 
     
 
     document.getElementById("loginform").onsubmit = handleinput; 
 
    } 
 
</script>

<form id="loginform" name="loginform" method="post"> 
 
\t \t <div> 
 
\t \t <label hidden> Username</label> 
 
\t \t \t <input type= "text" class="text" placeholder="Username" title="Username" name="username"> 
 
\t \t \t <span id="usernameError"></span> 
 
\t \t \t 
 
\t \t <label hidden> Password </label> 
 
\t \t \t <input type= "password" class="text" placeholder="Password" title="Password" name="password"> 
 
\t \t \t <span id="passwordError"></span> 
 
\t \t \t <a href="" class="anchor-float">Forgot password?</a> 
 
\t \t \t 
 
\t \t </div> 
 
\t \t \t <div class="button-container"> 
 
\t \t \t \t <a href="login.html" target="_blank"> <input type= "submit" value="Login" class="login"/> 
 
\t \t \t \t </a> 
 
\t \t \t \t <input type= "button" value="Sign up" class="login signup"/> 
 
\t \t \t </div> \t \t \t 
 
     </form>

來源

2016-12-13 valerie.austin

你有你的提交按鈕裹在a元素指着login.html，這是不如何表單提交後才能正常重定向。由於event bubbling and/or capturing，這也會導致處理事件的問題。

在現實中，你沒有指定其中的形式應該在你的form標籤發送其數據：

<form id="loginform" name="loginform" method="post">

信息（默認）表示形式將其數據發送到當前頁面（導致相同的頁面重新加載，但在此更新的加載中具有可訪問的表單數據）。

將數據發送到不同的網頁/資源，形式需要有一個action屬性指定到目的地的路徑：

<form id="loginform" name="loginform" method="post" action="login.html">

有關提交表格的詳細信息，請參閱this。

堆棧溢出的代碼片段環境不允許表單提交，但檢出this Fiddle其中有一個可用的代碼的更新版本。

來源

2016-12-13 14:26:32

實際上沒有'action'屬性的表單會提交到當前頁面。 – Justinas

由於OP代碼顯示了包含'a'元素的提交按鈕，該元素具有'login.html'的'href'，因此在這種情況下'login.html'是一個不同的頁面，因此我的答案是正確。 –

JavaScript驗證表格不能正常工作

回答

相關問題