Skip to content

Refactored the Booking Form component to support international phone formats and universal email validation #265

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aditya1771 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactored the Booking Form component to support international phone formats and universal email validation #265

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
314 changes: 184 additions & 130 deletions src/Pages/Book/book.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,170 +9,224 @@ const Book = () => {
passType: "",
});

const [errors, setErrors] = useState({});
const [submitted, setSubmitted] = useState(false);

// Shared input style
const inputStyle = {
display: "block",
width: "100%",
padding: "10px",
margin: "8px 0 4px 0",
backgroundColor: "black",
color: "white",
border: "1px solid #ffffff33",
borderRadius: "6px",
fontSize: "15px",
};

const errorText = {
color: "#ff5555",
fontSize: "13px",
marginBottom: "10px",
};

/* Handle input updates */
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name]: value,

const cleanValue =
name === "phone" || name === "email"
? value.trim().replace(/\s+/g, "")
: value;

setFormData((prev) => ({
...prev,
[name]: cleanValue,
}));

validateField(name, cleanValue);
};

/*Validation Logic */
const validateField = (name, value) => {
let msg = "";

if (name === "phone") {
// 🌍 E.164 format
const phoneRegex = /^\+?[1-9]\d{1,14}$/;
if (!value) msg = "Phone number is required.";
else if (!phoneRegex.test(value))
msg =
"Enter a valid international number (e.g. +14155552671 or +447700900123).";
}

if (name === "email") {
// valid emails only
const emailRegex =
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[A-Za-z]{2,}$/;
if (!value) msg = "Email address is required.";
else if (!emailRegex.test(value))
msg = "Enter a valid email address (e.g. user@example.com).";
}

setErrors((prev) => ({ ...prev, [name]: msg }));
};

/* Handle Form Submit */
const handleSubmit = (e) => {
e.preventDefault();
console.log("Form Submitted:", formData);

Object.keys(formData).forEach((key) =>
validateField(key, formData[key])
);

if (Object.values(errors).some((err) => err)) {
alert("Please fix the highlighted errors before submitting.");
return;
}

console.log("✅ Form Submitted:", formData);
setSubmitted(true);
alert("🎉 Booking submitted successfully!");
};

const isInvalid =
errors.phone || errors.email || !formData.phone || !formData.email;

return (
<div
style={{
backgroundColor: "black",
color: "white",
padding: "20px",
height: "100vh",
padding: "40px 20px",
minHeight: "100vh",
display: "flex",
justifyContent: "center",
alignItems: "flex-start",
flexDirection: "column",
}}
>
<div>
<button
type="submit"
<div style={{ width: "100%", textAlign: "center" }}>
<h1
style={{
backgroundColor: "yellow",
color: "black",
padding: "10px 15px",
border: "none",
cursor: "pointer",
color: "yellow",
fontSize: "28px",
fontWeight: "bold",
width: "100%",
marginTop: "15px",
marginBottom: "20px",
}}
>
Specifications
</button>
Book Your Workspace
</h1>
</div>

<form
onSubmit={handleSubmit}
style={{ maxWidth: "400px", margin: "auto" }}
noValidate
style={{
maxWidth: "420px",
width: "100%",
margin: "0 auto",
backgroundColor: "#111",
padding: "30px",
borderRadius: "12px",
boxShadow: "0 0 10px rgba(255, 255, 255, 0.1)",
}}
>
<label>
Name:
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
required
style={{
display: "block",
width: "100%",
padding: "8px",
margin: "10px 0",
backgroundColor: "black",
color: "white",
border: "1px solid #ffffff33",
}}
/>
</label>

<label>
Phone:
<input
type="tel"
name="phone"
value={formData.phone}
onChange={handleChange}
required
style={{
display: "block",
width: "100%",
padding: "8px",
margin: "10px 0",
backgroundColor: "black",
color: "white",
border: "1px solid #ffffff33",
}}
/>
</label>

<label>
Email:
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
required
style={{
display: "block",
width: "100%",
padding: "8px",
margin: "10px 0",
backgroundColor: "black",
color: "white",
border: "1px solid #ffffff33",
}}
/>
</label>

<label>
Company:
<input
type="text"
name="company"
value={formData.company}
onChange={handleChange}
style={{
display: "block",
width: "100%",
padding: "8px",
margin: "10px 0",
backgroundColor: "black",
color: "white",
border: "1px solid #ffffff33",
}}
/>
</label>

<label>
Pass Type:
<select
name="passType"
value={formData.passType}
onChange={handleChange}
style={{
display: "block",
width: "100%",
padding: "8px",
margin: "10px 0",
backgroundColor: "black",
color: "white",
border: "1px solid #ffffff33",
}}
>
<option value="Day Pass">Day Pass</option>
<option value="Hot Desk">Hot Desk</option>
<option value="Dedicated Desk">Dedicated Desk</option>
<option value="Cabin Space">Cabin Space</option>
<option value="Managed Office Solution ">
Managed Office Solution
</option>
<option value="Conference Room">Conference Room</option>
<option value="Meeting Room">Meeting Room</option>
</select>
</label>
{/* Name */}
<label htmlFor="name">Full Name:</label>
<input
id="name"
type="text"
name="name"
value={formData.name}
onChange={handleChange}
required
placeholder="Enter your full name"
style={inputStyle}
/>

{/* Phone */}
<label htmlFor="phone">Phone Number:</label>
<input
id="phone"
type="tel"
name="phone"
value={formData.phone}
onChange={handleChange}
required
placeholder="+14155552671"
style={inputStyle}
/>
{errors.phone && <p style={errorText}>{errors.phone}</p>}

{/* Email */}
<label htmlFor="email">Email Address:</label>
<input
id="email"
type="email"
name="email"
value={formData.email}
onChange={handleChange}
required
placeholder="you@example.com"
style={inputStyle}
/>
{errors.email && <p style={errorText}>{errors.email}</p>}

{/* Company */}
<label htmlFor="company">Company Name (optional):</label>
<input
id="company"
type="text"
name="company"
value={formData.company}
onChange={handleChange}
placeholder="Your company name"
style={inputStyle}
/>

{/* Pass Type */}
<label htmlFor="passType">Select Pass Type:</label>
<select
id="passType"
name="passType"
value={formData.passType}
onChange={handleChange}
required
style={inputStyle}
>
<option value="">-- Choose a Pass Type --</option>
<option value="Day Pass">Day Pass</option>
<option value="Hot Desk">Hot Desk</option>
<option value="Dedicated Desk">Dedicated Desk</option>
<option value="Cabin Space">Cabin Space</option>
<option value="Managed Office Solution">
Managed Office Solution
</option>
<option value="Conference Room">Conference Room</option>
<option value="Meeting Room">Meeting Room</option>
</select>

{/* Submit */}
<button
type="submit"
disabled={isInvalid}
style={{
backgroundColor: "yellow",
backgroundColor: isInvalid ? "gray" : "yellow",
color: "black",
padding: "10px 15px",
padding: "12px 18px",
border: "none",
cursor: "pointer",
borderRadius: "6px",
cursor: isInvalid ? "not-allowed" : "pointer",
fontWeight: "bold",
fontSize: "16px",
width: "100%",
marginTop: "15px",
marginTop: "10px",
transition: "0.3s",
}}
>
Submit
{submitted ? "✅ Submitted" : "Submit"}
</button>
</form>
</div>
Expand Down
Loading