2014-09-11 101 views
1

我有這個代碼應該拒絕表單提交如果輸入驗證函數返回false。我不知道我對這個Javascript拒絕提交不工作

<script> 
function validateName(x){ 
     // Validation rule 
     var re = /^[A-Za-z0-9']{3,}$/; 
     // Check input 
     if(re.test(document.getElementById(x).value)){ 
     // Style green 
     document.getElementById(x).style.background ='#ccffcc'; 
     // Hide error prompt 
     document.getElementById(x + 'Error').style.display = "none"; 
     return true; 
     }else{ 
     // Style red 
     document.getElementById(x).style.background ='#e35152'; 
     // Show error prompt 
     document.getElementById(x + 'Error').style.display = "block"; 
     return false; 
     } 
    } 
function validateForm(){ 
     var error = 0; 
     if(!validateName('name')){ 
     error++; 
     } 
    if(error > 0) { 
     return false; 
    } 
    } 
</script> 

做錯了而我的HTML是這樣的

<form action="register.php" method="post" onsubmit="return validateForm()"> 
Username 
<input type="text" name="username" id="username" onblur="validateName(name)" maxlength="12"/> 
<p class="inputdesc" align="center">(Between 8-12 characters.)</p> 
<input type="submit" name="submit" id="submit" value="Register"/> 
<input type="reset" value="Clear Form"/> 
</form> 

的代碼仍然可以提交,即使輸入文字無效。

+0

您的調試控制檯告訴您什麼? – Martijn 2014-09-11 13:06:37

+0

即時通訊不使用任何IDE ..有什麼我可以迅速在線測試這個調試控制檯消息給你嗎? – CudoX 2014-09-11 13:07:56

+0

不,它是您瀏覽器中的控制檯。按F12並刷新(在大多數瀏覽器上,在Windows上) – Martijn 2014-09-11 13:09:16

回答

1

我會做的是採取通過在物體上的功能,而不是優勢。例如:

<form action="register.php" method="post" id="form"> 
Username 
<input type="text" name="username" id="username" onblur="validateName(this)" maxlength="12"/> 
<p class="inputdesc" align="center">(Between 8-12 characters.)</p> 
<input type="submit" name="submit" id="submit" value="Register"/> 
<input type="reset" value="Clear Form"/> 
</form> 

<script> 
var okay = false; 
function validateName(e){ 
    // Validation rule 
    var re = /^[A-Za-z0-9']{3,}$/; 

    // Check input 
    if(re.test(e.value)){ 
    // Style green 
    e.style.background ='#ccffcc'; 
    // Hide error prompt 
    // e.style.display = "none"; 
    okay = true; 
    }else{ 
    // Style red 
    e.style.background ='#e35152'; 
    // Show error prompt 
    e.style.display = "block"; 
    okay = false; 
    } 
} 

document.getElementById('form').addEventListener('submit', function(e){ 
    if(okay == false) { 
     e.preventDefault(); 
    } else { 
     e.submit(); 
    } 
}); 

</script> 
+0

這是一個不缺少括號? 'document.getElementById('form')。addEventListener('submit',function(e){' – CudoX 2014-09-11 13:24:16

+0

沒有@ Gelo103097它下面有,在結束之前'',我剛剛使用了一個匿名函數而不是 – Ghost 2014-09-11 13:25:42

+0

它還沒有工作,即時通訊不知道爲什麼..即時通訊在我的控制檯上有這個錯誤'TypeError:document.getElementById(...)is null' – CudoX 2014-09-11 13:27:26

0

你要找的名稱,而不是用戶名

if(/^[A-Za-z0-9']{3,}$/.test(document.getElementById(x).value) { 
    return true; 
}else{ 
    return false; 
} 


function validateForm(){ 
    var error = 0; 
    if(validateName('username') == false){ 
    error++; 
    } 
    if(error > 0) { 
    return false; 
    } 
} 

形式

<form action="register.php" method="post" onsubmit="return validateForm();"> 
    Username 
    <input type="text" name="username" id="username" onblur="validateName(name)" maxlength="12"/> 
    <p class="inputdesc" align="center">(Between 8-12 characters.)</p> 
    <input type="submit" name="submit" id="submit" value="Register"/> 
    <input type="reset" value="Clear Form"/> 
</form>