讓Javascript使用HTML表單工作

我正在處理我的第一個Javascript文檔，我不確定這段代碼有什麼問題。我已經讓我的經驗更豐富的朋友看着它，他也找不到任何錯誤。當我在字段中輸入內容時，驗證器不會輸出警告消息。讓Javascript使用HTML表單工作

<!DOCTYPE html> 

<html> 
<head> 
    <title>Payment Form</title> 
    <link rel="stylesheet" type="text/css" href="paymentform.css"> 

<script type="text/javascript"> 

function validateCard() { 
    var x = document.getElementById("1").value; 
    if (x.length < 16) { 
     alert("Card Number must be 16 numbers long"); 
     return false; 
    } 
} 

    function validateCVC() { 
    var x = document.getElementById("2").value; 
    if (x.length != 3) { 
     alert("CVC must be 3 digits long"); 
     return false; 
    } 
} 


function validateName() { 
    var x = document.getElementById("3").value; 
    if (x == "") { 
     alert("Please enter a name"); 
     return false; 
    } 
} 

function validateMonth() { 
    var x = document.getElementById("4").value; 
    if (x < 1 || > 12 || x == "") { 
     alert("Must be a number between 1 and 12"); 
     return false; 
    } 
} 

function validateYear() { 
    var x = document.getElementById("5").value; 
    if (x < "2016" || x == null){ 
     alert("Must be the year 2016 or higher"); 
     return false; 
    } 
} 

function allfuncs() { 
     validateCard(); 
     validateCVC(); 
     validateName(); 
     validateMonth(); 
     validateYear(); 
} 
</script> 

</head> 

<img src="BlackBot logo.png" alt="Black Bot Computers" width="200px" height="100px"> 
</h1> 
<h1 align="center">Payment Form</h1> 
<HR COLOR="green" WIDTH="60%"> 

<body> 
<br> 
<center><form onSubmit="allfuncs()"> 

<br> 
    <div class="form-row"> 
    <label>Card number</label> 
    <input id="1" class="card-number" type="text" size="20" /> 
    </div> 
<br> 
    <div class="form-row"> 
    <label>CVC</label> 
    <input id="2" class="card-cvc" type="text" size="4" /> 
    </div> 
<br> 
    <div class="form-row"> 
    <label>Name</label> 
    <input id="3" class="card-holdername" type="text" size="20" /> 
    </div> 
<br> 
    <div class="form-row"> 
    <label>Expiry date (MM/YYYY)</label> 
    <input id="4" class="card-expiry-month" type="text" size="2" /> 
    <span></span> 
    <input id="5" class="card-expiry-year" type="text" size="4" /> 
    </div> 
<br> 
<br> 

    <input type="submit" value="Submit"> 
<br> 
<br> 

</form></center> 
</body> 

</html>

如果有人可以幫助找到問題，這將是一個很大的幫助！

來源

2016-03-11 Dafzr308

您可以先打開瀏覽器控制檯（F12），並記下您有的語法錯誤，然後自己修復這些錯誤？ – adeneo

我會幫你開始 - >'（x < 1 || > 12 || x ==「」）'，注意你是怎麼做的。 > 12'，'12'應該大於？ – adeneo

真誠道歉，那是文件中唯一的錯誤，我只是沒有看到它 – Dafzr308

我的控制檯在validateMonth（）函數中顯示錯誤。具體而言，@if (x < 1 || > 12 || x == "").只需將您的if語句修改爲以下內容：

function validateMonth（）{x} document.getElementById（「4」）。value;

if (x < 1 || x > 12 || x == "") { 
     alert("Must be a number between 1 and 12"); 
     return false; 
    }

}

這應該可以解決您的錯誤。

來源

2016-03-11 17:42:57 KpTheConstructor

如果驗證失敗，您需要告訴表單不要繼續。這是通過在您的示例中將false返回到onSubmit調用完成的。這是你需要改變的js。

function allfuncs() { 
    if(!validateCard()){return false;} 
    if(!validateCVC()){return false;} 
    if(!validateName()){return false;} 
    if(!validateMonth()){return false;} 
    if(!validateYear()){return false;} 
    return true; 
}

然後將您的form呼叫更改爲此。

<form onSubmit="return allfuncs();">

正如在其他評論和答案中指出的那樣，您也有一個語法錯誤，通過這個錯誤得到解決。

if (x < 1 || x > 12 || x == "") {

來源

2016-03-11 17:52:07 OffTheBricks

讓Javascript使用HTML表單工作

回答

相關問題