The task is to validate the form on server side (therefore HTML level validation is not satisfactory) used on such a page according to the conditions below using PHP. I have included the index.js, index.php and index.css codes.

a. The fullname field is required and must contain at least two words.

b. The email field is required and must contain a formally valid e-mail address.

c. The colour field is required and its value can only be black, white, gold, pink or blue.

d. The cardnumber (credit card number) field is required and must be exactly 19 characters long.

e. The cardnumber (credit card number) field must follow the XXXX-XXXX-XXXX-XXXX format where the X characters replaced by digits.

f. In case of incorrect input, an error message should appear next to the given field, informing about the cause of the error.

g. The form placed on the page should keep its state which means that the submitted values should be written back into the fields.

h. The div with ID success and its contents should only appear in the generated HTML code if the form was submitted by the user and no errors were found during validation. index.php

Task 2: You've just won a new phone!

Your full name:

Your e-mail address:

Choose colour:

black

white

gold

pink

blue

Your credit card number:

Hyperlinks for testing

fullname=&email=&cardnumber=

fullname=Grandma&email=&cardnumber=

fullname=Lovely+Grandma&email=&cardnumber=

fullname=Lovely+Grandma&email=nagyi&cardnumber=

fullname=Lovely+Grandma&email=nagyi%40webprog.hu&cardnumber=

fullname=Lovely+Grandma&email=nagyi%40webprog.hu&colour=red&cardnumber=

fullname=Lovely+Grandma&email=nagyi%40webprog.hu&colour=pink&cardnumber=

fullname=Lovely+Grandma&email=nagyi%40webprog.hu&colour=pink&cardnumber=1234

fullname=Lovely+Grandma&email=nagyi%40webprog.hu&colour=pink&cardnumber=1234.5678.1234.5678

Correct input: fullname=Lovely+Grandma&email=nagyi%40webprog.hu&colour=pink&cardnumber=1234-5678-1234-5678

index.css

@import url('https://cdn.jsdelivr.net/gh/elte-fi/www-assets@19.10.16/styles/mdss.min.css');

label {

display: inline-block;

width: 200px;

}

button {

background-color: #517d81;

cursor: pointer;

margin-top: 0.5em;

color: white;

font-weight: bold;

border: 0;

padding: 0.5rem;

}

button:hover {

filter: brightness(120%);

}

button:active {

filter: hue-rotate(30deg);

}

#success {

margin-top: 1em;

width: 100%;

}

#success h2 {

text-align: center;

font-size: 2em;

}

#progress-bar {

width: 100%;

background-color: #ddd;

padding: 3px;

border-radius: 3px;

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);

}

#progress-bar-fill {

height: 2em;

background-color: #517d81;

}

index.js

// THERE IS NO TASK TO SOLVE IN THIS FILE

// EBBEN A FJLBAN NINCS MEGOLDAND FELADAT

const wrapperDiv = document.querySelector("#success")

const titleElement = document.querySelector("#success h2")

const fillElement = document.querySelector("#progress-bar-fill")

let lastFrameTime = performance.now()

let lastCompleteTransaction = Number.MIN_SAFE_INTEGER

let progress = undefined

let currentSpeed = undefined

const currencies = { '$' : 1.00, '' : 0.96, '' : 0.82, '' : 136, 'HUF ' : 382 }

const metals = [

{ name: 'gold', unit: 'g', usd_per_unit: 57.68 },

{ name: 'silver', unit: 'kg', usd_per_unit: 749.24 },

{ name: 'platinum', unit: 'g', usd_per_unit: 32.72 },

{ name: 'palladium', unit: 'g', usd_per_unit: 55.49 },

]

function amountInRandomCurrency(usd){

const keys = Object.keys(currencies)

const currency = keys[Math.floor(Math.random() * keys.length)]

const exchange_rate = currencies[currency]

return { currency, amount: (usd * exchange_rate).toFixed(exchange_rate < 100 ? 2 : 0) }

}

function next(){

const now = performance.now()

const dt = now - lastFrameTime

lastFrameTime = now

if (now - lastCompleteTransaction >= 1000){

progress = progress < 100 ? progress + (Math.random() * dt * currentSpeed) : 0

if (progress >= 100) {

lastCompleteTransaction = now

titleElement.style.color = 'green';

fillElement.style.backgroundColor = 'green';

}

if (!progress) {

currentSpeed = Math.random() * (0.07 - 0.02) + 0.02

const messageType = Math.random()

if (messageType < 0.3){

const { currency, amount } = amountInRandomCurrency(200 + Math.random() * 1800)

let account = String.fromCharCode(Math.floor(Math.random() * 26) + 65) + String.fromCharCode(Math.floor(Math.random() * 26) + 65)

for (let i = 0; i < 16; i++) account += Math.floor(Math.random() * 10)

titleElement.innerText = `Transferring ${currency}${amount} to ${account}`

} else if (messageType < 0.7) {

const usd = Math.random() * 2000

const btc = (usd / 16792.30).toFixed(8)

const { currency, amount } = amountInRandomCurrency(usd)

titleElement.innerText = `Purchasing ${btc} BTC for ${currency}${amount}`

} else {

const { name, unit, usd_per_unit } = metals[Math.floor(Math.random() * metals.length)]

const quantity = Math.random() * 20 + 2

const { currency, amount } = amountInRandomCurrency(quantity * usd_per_unit)

titleElement.innerText = `Buying ${quantity.toFixed(2)} ${unit} of ${name} for ${currency}${amount}`

}

titleElement.style.color = ''

fillElement.style.backgroundColor = '';

}

fillElement.style.width = `${progress}%`

}

requestAnimationFrame(next)

}

if (wrapperDiv && titleElement && fillElement) requestAnimationFrame(next)