表單驗證不起作用

Question

我有一個簡單的登錄，我無法驗證工作。我想知道是否有人可以幫忙。

HTML：

<div class="login"> 
     <h2>Sign In</h2> 

     <form id="frmLogin" method="post"> 

      Username: <input id="txtUsername" name="txtUsername" type="text" /><br/> 
      Password: <input name="txtPassword" type="password" /> <br/> 
      <button onClick="validateLogin()">Log In</button> 
     </form> 
    </div><!-- End of Login Section --> 

的Javascript：

<script> 
function validateLogin() 
{ 
    var userName = document.getElementsByID('txtUsername').value; 

    var invalidForm = 0; 

    if(userName == "") 
    { 
     alert("Username cannot be blank!"); 
     invalidForm = 1;     
    }//end if 

    if(invalidForm == 0) 
    { 
     alert("Form validated, no errors"); 
    }//end if 

} 
</script> 

目前我只測試一個空的用戶名，一旦我能得到這個工作，我會繼續上休息。 謝謝！

Answer 1

做你的jQuery代碼的類似： -

<script> 
function validateLogin() 
{ 
    var userName = document.getElementById('txtUsername').value; 

    var invalidForm = 0; 
    var errMessage = "" 

    if(userName === "") 
    { 
     errMessage = "Username cannot be blank!"; 
     invalidForm = 1;     
    }//end if 

    if(invalidForm == 0) 
    { 
     alert("Form validated, no errors"); 
    } 
    else if (invalidForm == 1) 
    { 
     alert(errMessage); 
     return false; 
    } 
} 
</script> 

它可以幫助你。

Answer 2

要獲得和通過ID元素函數名稱是getElementById而不是getElementsByID，此外，JavaScript區分大小寫，因此getElementByID不起作用。

function validateLogin() 
{ 
    var userName = document.getElementById('txtUsername').value; 

    var invalidForm = 0; 

    if(userName == "") 
    { 
     alert("Username cannot be blank!"); 
     invalidForm = 1;     
    }//end if 

    if(invalidForm == 0) 
    { 
     alert("Form validated, no errors"); 
    }//end if 

}