0
var myForm = document.getElementById("form");
document.bgColor="#FFFFCC"; \t \t \t \t \t //page styling
myForm.style.color="blue"; \t
myForm.style.fontSize="20px";
myForm.style.fontWeight="400";
myForm.style.fontFamily="arial";
function validateForm() //form validation
{
\t var firstname = document.getElementById("firstname"); //declared variables
\t var lastname = document.getElementById("lastname");
\t var postcode = document.getElementById("postcode");
\t var email = document.getElementById("email");
\t var cardtype = document.getElementById("cardtype");
\t var cardnumber = document.getElementById("cardnumber");
\t var ccv = document.getElementById("ccv"); \t
\t var month = document.getElementById("month");
\t var year = document.getElementById("year");
\t \t \t \t
\t if (firstname.value==""){ \t //validate first name
\t \t alert("Your first name can not be left blank"); \t \t
\t \t firstname.focus();
\t \t return false;
\t } \t \t
\t if (lastname.value==""){ \t //validate last name \t
\t \t alert("Your last name can not be left blank"); \t \t
\t \t lastname.focus();
\t \t return false;
\t } \t
\t if (postcode.value.length!=4){ //validate post code
\t \t alert("Your post code must be 4 numbers in length"); \t \t
\t \t postcode.focus();
\t \t return false;
\t }
\t if (isNaN(document.getElementById("postcode").value)){
\t \t alert("Your postcode can not contain letters"); \t \t
\t \t postcode.focus();
\t \t return false;
\t }
\t if (email.value.length<5 || email.value.indexOf("@")== -1){ //validate email
\t \t alert("Your email must not be less than 5 charcters in length, it must contain an @ and a ."); \t \t
\t \t email.focus();
\t \t return false;
\t } \t
\t if (email.value.indexOf(".")== -1){
\t \t alert("Your email must not be less than 5 charcters in length, it must contain an @ and a ."); \t \t
\t \t email.focus();
\t \t return false;
\t } \t
\t if (cardtype.value == ""){
\t \t alert("Please enter your card type"); \t \t
\t \t email.focus();
\t \t return false;
\t }
\t if (cardnumber.value.length!=16){ //validate card number length
\t \t alert("Your card number must be 16 numbers in length"); \t \t
\t \t cardnumber.focus();
\t \t return false;
\t } \t
\t if (isNaN(document.getElementById("cardnumber").value)){
\t \t alert("Your card number can not contain letters"); \t \t
\t \t cardnumber.focus();
\t \t return false;
\t } \t \t \t \t \t \t
\t if (ccv.value.length!=3){ //validate ccv number length
\t \t alert("Your ccv must be 3 numbers in length"); \t \t
\t \t ccv.focus();
\t \t return false;
\t }
\t if (isNaN(document.getElementById("ccv").value)){
\t \t alert("Your ccv must be a number"); \t \t
\t \t ccv.focus();
\t \t return false;
\t } \t \t
} \t
function checkDate(){ //check expiry date of card
\t var date = new Date();
\t var month = date.getMonth()+1; //get current month
\t var year = date.getYear()+1; \t //get current year
\t var expiryMonth = document.getElementById("month").value;
\t var expiryYear = document.getElementById("year").value;
\t if (month == expiryMonth)//check if the current month has not expired
\t {
\t \t alert("Your card has expired");
\t \t month.focus();
\t \t return false; \t \t
\t }
\t if (year == expiryYear) //check if the current year has not expired
\t {
\t \t alert("Your card has expired");
\t \t year.focus();
\t \t return false;
\t }
\t return false;//so the data is not cleared
\t
}
\t //alert("Your order has been successfully submitted thank you"); //notify user of correct submission
\t //return true;
\t
\t //open up help window
function Popup(){ \t
\t \t window.open("file:///C:/Users/Andy2411/Desktop/4JSB/assignment/html/help.html", "myWindow",
\t \t "status = 1, height = 500, width = 500, resizable = 0");
\t \t return;
\t }form{width:700px;margin:0 auto;}
#Div1{float:;width:300;height:300;border:2px solid;border-radius:10px;padding:10px;padding-bottom:20px;background-color:;box-shadow:0 0 10px #2DADAC;position: relative; top: -5%; transform: translateY(5%);}
#Div2{float:;width:300;height:300;border:2px solid;border-radius:10px;padding:10px;background-color:;box-shadow:0 0 10px #2DADAC;position: relative; top: -10%; transform: translateY(10%);}
#Div3{text-align:center;margin:0 auto;display:;position: relative; top: -190%; transform: translateY(190%);}<!DOCTYPE html>
<html>
<!--Pseudocode
\t INPUT firstname, lastname, postcode, email, cardtype, cardnumber, ccv, expiryMonth, expiryYear
\t onsubmit = DO validateForm()
\t END
\t
\t MODULE validateForm()
\t IF (firstname =="") THEN
\t OUTPUT error in firstname
\t RETURN false
ENDIF
\t IF (lastname =="") THEN
\t OUTPUT error in lastname
\t RETURN false
ENDIF
\t IF (postcode.length!=4) THEN
\t OUTPUT error in postcode
\t RETURN false
ENDIF
\t IF (isNaN(document.getElementById("postcode").value)) THEN
\t OUTPUT error in postcode
\t RETURN false
ENDIF
\t IF (email.value.length<5 || email.value.indexOf("@")== -1) THEN
\t OUTPUT error in email
\t RETURN false
ENDIF
\t IF email.value.indexOf(".")== -1) THEN \t \t
\t OUTPUT error in email
\t RETURN false \t \t
ENDIF \t \t \t
\t IF (cardnumber.length!=16) THEN
\t OUTPUT error in cardnumber
\t RETURN false
ENDIF
\t IF (isNaN(document.getElementById("cardnumber").value))
\t OUTPUT error in cardnumber
\t RETURN false
ENDIF
\t IF (ccv.length !=3) THEN
\t OUTPUT error in ccv
\t RETURN false
ENDIF \t
\t IF (isNaN(document.getElementById("ccv").value))
\t OUTPUT error in ccv
\t RETURN false
ENDIF
\t IF (month == expiryMonth) THEN
\t OUTPUT error in month
\t RETURN false
ENDIF
\t IF (year == expiryYear) THEN
\t OUTPUT error in year
\t RETURN false
ENDIF
\t OUTPUT correct
\t RETURN true
END validateForm()-->
<head>
<title>Assignment4JSB</title>
<link rel="stylesheet" type="text/css" href="../css2/assignment.css" />
</head>
<body>
<form name=”userForm” autocomplete="on" id="form" onsubmit="return validateForm()">
<script src="../js2/assignment.js"></script>
<div id="Div1">
<h3>Order Form</h3>
<fieldset>
<legend>Enter your Details here</legend></br>
First name: <input type="text" id="firstname" size="30" />
<br /><br />
Last name: <input type="text" id="lastname" size="30" />
<br /><br />
Postcode: <input type="text" id="postcode" size="4" />
<br /><br />
Email: <input type="text" id="email" size="30" />
<br/><br/>
</fieldset>
<!--<table>
<tr>
<td><label for="FirstName">First Name</label></td>
<td><input type="text" name="FirstName" id="firstname" size="30" required="required" autofocus /></td>
</tr>
<tr>
<td><label for="LastName">Last Name</label></td>
<td><input type="text" name="LastName" id="lastname" size="30" required="required" /></td>
</tr>
<tr>
<td><label for="PostCode">Postcode</label></td>
<td><input type="text" name="PostCode" id="postcode" size="4" required="required" /></td>
</tr>
<tr>
<td><label for="Email">Email</label></td>
<td><input type="text" name="Email" id="email" size="30"/></td>
</tr>
</table>-->
<h3>Payment Details</h3>
<fieldset>
<legend>Please enter your payment details</legend><br/>
Credit Card <select id="cardtype">
<option value=""></option>
<option value="Mastercard">Mastercard</option>
<option value="Visa">Visa</option>
<option value="AmericanExpress">American Express</option>
</select>
<br/><br/>
Card number <input type="text" id="cardnumber" size="18"/>
<br/></br>
CCV <input type="text" id="ccv" size="3"/>
<br/></br>
Expiry MM/YY <select id="month" onsubmit="checkDate()">
<option value=""></option>
<option value="month">01</option>
<option value="month">02</option>
<option value="month">03</option>
<option value="month">04</option>
<option value="month">05</option>
<option value="month">06</option>
<option value="month">07</option>
<option value="month">08</option>
<option value="month">09</option>
<option value="month">10</option>
<option value="month">11</option>
<option value="month">12</option>
</select>
<select id="year" onsubmit="checkDate()">
<option value=""></option>
<option value="year">2016</option>
<option value="year">2017</option>
<option value="year">2018</option>
<option value="year">2019</option>
<option value="year">2020</option>
<option value="year">2021</option>
<option value="year">2022</option>
<option value="year">2023</option>
<option value="year">2024</option>
<option value="year">2025</option>
<option value="year">2026</option>
</select>
</fieldset>
</div>
<br/>
<div id="Div3">
<button type="submit" >Submit</button>
<button type="button" onClick="Popup()">Help</button><br/>
</div>
</form>
</body>
</html>我有一个JavaScript任务写一个基本形式和验证用户输入的，我已经如此严重，我写了一个函数来检查信用卡的到期日的阶段（必须根据当前日期检查月份和年份），然后向用户确认成功提交。我还希望增加“帮助”和“提交”按钮的大小，并将它们垂直移动到底部的形式。我无法使这个日期检查工作，我会附上我的工作到目前为止，任何帮助将不胜感激，谢谢。