Skip to content

Commit 777b38f

Browse files
codebyshaycodebyshay
committed
JavaScript Removed
1 parent 1ac037c commit 777b38f

1 file changed

Lines changed: 60 additions & 93 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 60 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,75 @@
11
<!DOCTYPE html>
22
<html lang="en">
33

4-
<head>
5-
<meta charset="UTF-8">
6-
<title>T-Shirt Order</title>
7-
</head>
8-
94
<body>
105

11-
<form id="tshirtForm">
12-
<label>
13-
Full Name:
14-
<input type="text" id="name" name="name" required>
15-
</label>
16-
<br><br>
17-
18-
<label>
19-
Email:
20-
<input type="email" id="email" name="email" required>
21-
</label>
22-
<br><br>
23-
24-
<label>
25-
T-shirt Colour:
26-
<select id="colour" name="colour" required>
27-
<option value="" disabled selected>Select a colour</option>
28-
<option value="red">Red</option>
29-
<option value="blue">Blue</option>
30-
<option value="black">Black</option>
31-
</select>
32-
</label>
33-
<br><br>
34-
35-
<fieldset>
36-
<legend>T-shirt Size</legend>
37-
38-
<label style="display:block; padding:12px 0;">
39-
<input type="radio" name="size" value="XS" required> XS
40-
</label>
6+
<head>
7+
<meta charset="UTF-8">
8+
<title>T-Shirt Order</title>
9+
</head>
4110

42-
<label style="display:block; padding:12px 0;">
43-
<input type="radio" name="size" value="S"> S
44-
</label>
11+
<main>
4512

46-
<label style="display:block; padding:12px 0;">
47-
<input type="radio" name="size" value="M"> M
13+
<form id="tshirtForm">
14+
<label>
15+
Full Name:
16+
<input type="text" id="name" name="name" required>
4817
</label>
18+
<br><br>
4919

50-
<label style="display:block; padding:12px 0;">
51-
<input type="radio" name="size" value="L"> L
20+
<label>
21+
Email:
22+
<input type="email" id="email" name="email" required>
5223
</label>
53-
54-
<label style="display:block; padding:12px 0;">
55-
<input type="radio" name="size" value="XL"> XL
24+
<br><br>
25+
26+
<label>
27+
T-shirt Colour:
28+
<select id="colour" name="colour" required>
29+
<option value="" disabled selected>Select a colour</option>
30+
<option value="red">Red</option>
31+
<option value="blue">Blue</option>
32+
<option value="black">Black</option>
33+
</select>
5634
</label>
35+
<br><br>
5736

58-
<label style="display:block; padding:12px 0;">
59-
<input type="radio" name="size" value="XXL"> XXL
60-
</label>
61-
</fieldset>
62-
63-
<br>
64-
<button type="submit">Submit</button>
65-
</form>
66-
67-
<script>
68-
document.getElementById("tshirtForm").addEventListener("submit", function (event) {
69-
event.preventDefault();
70-
71-
const name = document.getElementById("name").value.trim();
72-
const email = document.getElementById("email").value.trim();
73-
const colour = document.getElementById("colour").value;
74-
const size = document.querySelector('input[name="size"]:checked');
75-
76-
const namePattern = /^[A-Za-z\s]{2,}$/; //I added this to validate names to accept only letter and spaces
77-
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Basic email pattern validation
78-
79-
if (!namePattern.test(name)) {
80-
alert("Please enter a valid name (letters and spaces only).");
81-
return;
82-
}
83-
84-
if (!emailPattern.test(email)) {
85-
alert("Please enter a valid email address.");
86-
return;
87-
}
88-
89-
if (colour === "") {
90-
alert("Please select a t-shirt colour.");
91-
return;
92-
}
93-
94-
if (!size) {
95-
alert("Please select a t-shirt size.");
96-
return;
97-
}
98-
99-
alert("Order details are valid!");
100-
});
101-
</script>
102-
103-
<footer>
104-
<p>By Shuheda Begum</p>
105-
</footer>
37+
<fieldset>
38+
<legend>T-shirt Size</legend>
39+
40+
<label style="display:block; padding:12px 0;">
41+
<input type="radio" name="size" value="XS" required> XS
42+
</label>
43+
44+
<label style="display:block; padding:12px 0;">
45+
<input type="radio" name="size" value="S"> S
46+
</label>
47+
48+
<label style="display:block; padding:12px 0;">
49+
<input type="radio" name="size" value="M"> M
50+
</label>
51+
52+
<label style="display:block; padding:12px 0;">
53+
<input type="radio" name="size" value="L"> L
54+
</label>
55+
56+
<label style="display:block; padding:12px 0;">
57+
<input type="radio" name="size" value="XL"> XL
58+
</label>
59+
60+
<label style="display:block; padding:12px 0;">
61+
<input type="radio" name="size" value="XXL"> XXL
62+
</label>
63+
</fieldset>
64+
65+
<br>
66+
<button type="submit">Submit</button>
67+
</form>
68+
69+
<footer>
70+
<p>By Shuheda Begum</p>
71+
</footer>
72+
</main>
10673

10774
</body>
10875

0 commit comments

Comments
 (0)