var myForm = document.getElementById("form");
document.bgColor="#FFFFCC"; //page styling
myForm.style.color="blue";
myForm.style.fontSize="20px";
myForm.style.fontWeight="400";
myForm.style.fontFamily="arial";
function validateForm()
{
var firstname = document.getElementById("firstname");
var lastname = document.getElementById("lastname");
var postcode = document.getElementById("postcode");
var email = document.getElementById("email");
var cardtype = document.getElementById("cardtype");
var cardnumber = document.getElementById("cardnumber");
var ccv = document.getElementById("ccv");
var month = document.getElementById("month");
var year = document.getElementById("year");
if (firstname.value==""){
alert("Your first name can not be left blank");
firstname.focus();
return false;
}
if (lastname.value==""){
alert("Your last name can not be left blank");
lastname.focus();
return false;
}
if (postcode.value.length!=4){
alert("Your post code must be 4 numbers in length");
postcode.focus();
return false;
}
if (isNaN(document.getElementById("postcode").value)){
alert("Your postcode can not contain letters");
postcode.focus();
return false;
}
if (email.value.length<5 || email.value.indexOf("@")== -1){
alert("Your email must not be less than 5 characters in length, it must contain an @ and a .");
email.focus();
return false;
}
if (email.value.indexOf(".")== -1){
alert("Your email must not be less than 5 characters in length, it must contain an @ and a .");
email.focus();
return false;
}
if (cardtype.value == ""){
alert("Please enter your card type");
email.focus();
return false;
}
if (cardnumber.value.length!=16){
alert("Your card number must be 16 numbers in length");
cardnumber.focus();
return false;
}
if (isNaN(document.getElementById("cardnumber").value)){
alert("Your card number can not contain letters");
cardnumber.focus();
return false;
}
if (ccv.value.length!=3){
alert("Your ccv must be 3 numbers in length");
ccv.focus();
return false;
}
if (isNaN(document.getElementById("ccv").value)){
alert("Your ccv must be a number");
ccv.focus();
return false;
}
}
function checkDate(){
var date = new Date();
var month = date.getMonth()+1;
var year = date.getYear()+1;
var expiryMonth = document.getElementById("month").value;
var expiryYear = document.getElementById("year").value;
if (month == expiryMonth)
{
alert("Your card has expired");
month.focus();
return false;
}
if (year == expiryYear)
{
alert("Your card has expired");
year.focus();
return false;
}
return false;
}
function Popup(){
window.open( "file:///C:/Users/Andy2411/Desktop/4JSB/assignment/html/help.html", "myWindow",
"status = 1, height = 500, width = 500, resizable = 0" );
return;
}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...
<!DOCTYPE html>
<html>
<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>
<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>
...
<button type="submit" >Submit</button>
<button type="button" onClick="Popup()">Help</button><br/>
</div>
</form>
</body>
</html>An assignment in JavaScript involves creating a basic form to validate user input. The code includes a function to check the expiry date of a credit card against the current date and providing users with a confirmation message upon successful submission. The task also requires increasing the size of the 'help' and 'submit' buttons and positioning them at the bottom of the form. However, there seems to be an issue with the date check functionality. Please find attached the progress made so far. Any assistance or suggestions would be greatly appreciated. Thank you.