The system performs smart validation to ensure that users cannot book for past dates or time slots that have already passed, especially on the current day. Upon successful booking, a confirmation message is displayed to the user.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Restaurant Reservation</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #f8f9fa;
margin: 0;
padding: 20px;
}
.reservation-container {
max-width: 600px;
margin: auto;
background-color: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 0 12px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
label {
display: block;
margin-top: 15px;
}
input, select, textarea {
width: 100%;
padding: 10px;
margin-top: 6px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
margin-top: 20px;
width: 100%;
padding: 12px;
background-color: #28a745;
color: white;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.confirmation {
margin-top: 20px;
font-weight: bold;
color: #155724;
background-color: #d4edda;
padding: 15px;
border-radius: 8px;
display: none;
}
.error {
color: red;
font-size: 14px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="reservation-container">
<h2>Restaurant Reservation Form</h2>
<form id="reservationForm">
<label for="name">Full Name:</label>
<input type="text" id="name" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" required pattern="[0-9]{10}" placeholder="10-digit number">
<label for="date">Reservation Date:</label>
<input type="date" id="date" required>
<label for="time">Time:</label>
<input type="time" id="time" required>
<label for="guests">Number of Guests:</label>
<input type="number" id="guests" min="1" max="20" required>
<label for="requests">Special Requests (Optional):</label>
<textarea id="requests" rows="3" placeholder="e.g. window seat, birthday celebration"></textarea>
<div id="errorMsg" class="error"></div>
<button type="submit">Reserve Now</button>
</form>
<div class="confirmation" id="confirmationMsg"></div>
</div>
<script>
const form = document.getElementById("reservationForm");
const dateInput = document.getElementById("date");
const timeInput = document.getElementById("time");
const errorMsg = document.getElementById("errorMsg");
// Set minimum date to today
const today = new Date().toISOString().split("T")[0];
dateInput.setAttribute("min", today);
form.addEventListener("submit", function (e) {
e.preventDefault();
const selectedDate = new Date(dateInput.value);
const selectedTime = timeInput.value;
const currentDate = new Date();
const selectedDateTime = new Date(`${dateInput.value}T${selectedTime}`);
// Clear error message
errorMsg.textContent = "";
// Prevent booking for past time today
if (selectedDate.toDateString() === currentDate.toDateString()) {
if (selectedDateTime <= currentDate) {
errorMsg.textContent = "You cannot select a past time for today.";
return;
}
}
// Basic revalidation (just in case)
if (selectedDateTime < currentDate) {
errorMsg.textContent = "You cannot book for a past date or time.";
return;
}
const name = document.getElementById("name").value.trim();
const phone = document.getElementById("phone").value.trim();
const guests = document.getElementById("guests").value;
const requests = document.getElementById("requests").value.trim();
const message = `
Thank you, ${name}!<br>
Your reservation for <strong>${guests}</strong> guest(s) on <strong>${dateInput.value}</strong> at <strong>${timeInput.value}</strong> has been confirmed.
${requests ? `<br><br>Special Requests: <em>${requests}</em>` : ""}
`;
document.getElementById("confirmationMsg").innerHTML = message;
document.getElementById("confirmationMsg").style.display = "block";
form.reset();
});
</script>
</body>
</html>
Comments
Post a Comment