Javascript表單驗證onsubmit不工作

Question

我在Javascript中編寫了一個驗證函數來檢查我的密碼是否匹配。

HTML

<form action="/anotherPage" onsubmit="return validate()" method="POST"> 
    <input type="password" name="password"/> 
    <input type="password" name="password2"/> 

    <button type="submit" class="btn btn-primary">submit</button> 
</form> 

的Javascript

<script> 
    function validate() { 
     var ok = true; 
     var password = document.getElementById("password").value; 
     var password2 = document.getElementById("password2").value; 
     if (password != password2) { 
      alert("Passwords Do not match"); 
      document.getElementById("password").style.borderColor = "#E34234"; 
      document.getElementById("password2").style.borderColor = "#E34234"; 
      ok = false; 
     } 
     else { 
      alert("Passwords Match!!!"); 
     } 
     return ok; 
    } 
</script> 

在控制檯，它說的形式提交，但我想驗證形式submitted.But永遠達不到我的驗證功能之前。我該如何解決？

Answer 1

您正在使用getElementById - 但您沒有具有此類ID的輸入字段。將id="password"和id="password2"添加到輸入字段 - 魔術會發生。

Answer 2

您需要使用event.preventDefault防止默認表單提交

function validate(event) { 
event.preventDefault(); 
     //Rest of code 
     return ok; 
    } 

JSFIDDLE

Answer 3

你錯過來定義你輸入的ID：

<form action="/anotherPage" onsubmit="return validate()" method="POST"> 
    <input type="password" id="password" name="password"/> 
    <input type="password" id="password2" name="password2"/> 

    <button type="submit" class="btn btn-primary">submit</button> 
</form> 

Answer 4

你可以做到這一點使用jQuery但首先你必須給你的input一個id

<input type="password" id="password" name="password"/> 
<input type="password" id="password2" name="password2"/> 
// then the jQuery 
pass = $('#password').val(); 
pass2 = $('#password2').val(); 
if(pass == pass2){ 
    alert('good'); 
} else { 
    alert('bad'); 
}