<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Form</title>
<style>
/* Add your CSS styles here */
</style>
</head>
<body>
<div class="container">
<h2>Payment Form</h2>
<form id="paymentForm" onsubmit="return validateForm()">
<div class="form-group">
<label for="cardNumber">Debit/Credit Card Number</label>
<input type="text" id="cardNumber" name="cardNumber" required>
</div>
<div class="form-group">
<label for="expiryDate">Expiry Date</label>
<input type="text" id="expiryDate" name="expiryDate"
placeholder="MM/YY" required>
</div>
<div class="form-group">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" required>
</div>
<input type="submit" value="Pay Now">
</form>
</div>
<script>
function validateForm() {
var cardNumber = document.getElementById('cardNumber').value;
var expiryDate = document.getElementById('expiryDate').value;
var cvv = document.getElementById('cvv').value;
// Simple validation for demonstration purposes
if (cardNumber.length !== 16 || isNaN(cardNumber)) {
alert('Invalid credit card number');
return false;
}
if (!expiryDate.match(/^(0[1-9]|1[0-2])\/\d{2}$/)) {
alert('Invalid expiry date. Please use MM/YY format.');
return false;
}
if (cvv.length !== 3 || isNaN(cvv)) {
alert('Invalid CVV');
return false;
}
// If all validations pass, you can proceed with the payment process
alert('Payment Successful!');
return true;
}
</script>
</div>
