使用javascript驗證三個數字輸入字段

Question

我目前正在使用PHP設置一個頁面，該頁面上有三個數字輸入字段。它看起來如下：

echo "Adult Tickets: <input type=\"number\" name=\"adulttickets[]\" value='0' id='adult' min='0' max='10'><br />"; 
echo "Child Tickets: <input type=\"number\" name=\"childtickets[]\" value='0' id='child' min='0' max='10'><br />"; 
echo "Student Tickets: <input type=\"number\" name=\"studenttickets[]\" id='student' value='0' min='0' max='10'><br />"; 

echo <<<_END 

<input type="submit" onsubmit = 'return validate()' value="Submit booking details"> 

我想使用JavaScript來確保如果沒有這三個輸入類型已經從零缺省值改變形式不能提交。在此反思中，我設置了以下JS腳本：

<script> 
function validate(){ 
    var adult = document.getElementById('adult').value; 
    var child = document.getElementById('child').value; 
    var student = document.getElementById('student').value; 

    if(adult==0 && child ==0 && student==0){ 
     alert("yes."); 
     return false; 

    } 
    return true; 
} 
</script> 

但是，當我運行此操作時沒有任何反應。我是否以正確的方式去做這件事？有沒有更好的方法來實現我剛剛描述的結果？

Answer 1

你需要解析的輸入值轉換爲數字（目前他們是字符串，即使輸入類型是數字 - 值將是一個字符串）在比較之前;

var adult = parseInt(document.getElementById('adult').value); 
var child = parseInt(document.getElementById('child').value); 
var student = parseInt(document.getElementById('student').value); 

Answer 2

我假設你有下面這段代碼，只需更改onsubmit到onclick

<?php 
echo "Adult Tickets: <input type=\"number\" name=\"adulttickets[]\" value='0' id='adult' min='0' max='10'><br />"; 
echo "Child Tickets: <input type=\"number\" name=\"childtickets[]\" value='0' id='child' min='0' max='10'><br />"; 
echo "Student Tickets: <input type=\"number\" name=\"studenttickets[]\" id='student' value='0' min='0' max='10'><br />"; 
?> 
<input type="submit" onclick = 'return validate()' value="Submit booking details"> 

<script> 
function validate(){ 
    var adult = document.getElementById('adult').value; 
    var child = document.getElementById('child').value; 
    var student = document.getElementById('student').value; 

    if(adult==0 && child ==0 && student==0){ 
     alert("yes."); 
     return false; 

    } 
    return true; 
} 
</script>