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の割り当てを持って、私はクレジットカードの有効期限をチェックする機能を書かれている段階に得ています（月と年は現在の日付と照合する必要があります）、投稿が成功したことをユーザーに確認します。また、「ヘルプ」と「送信」ボタンのサイズを大きくして、フォームの。私はこの日付のチェックがうまくいかず、私が今までの仕事を添付してくれれば、どんな助けでも感謝します。