Skip to content

Commit cc5b1ae

Browse files
muhtalhakhanmuhtalhakhan
authored
Merge pull request #49 from Valley-15/feature/client-side-validation
Feature/client side validation
2 parents 9ca16bb + 15ce123 commit cc5b1ae

File tree

3 files changed

+98
-21
lines changed

3 files changed

+98
-21
lines changed

‎forms-portal/user-registration-form/formHandler.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
document.addEventListener("DOMContentLoaded", () => {
2+
const form = document.querySelector('.user-registration-form');
3+
4+
// Handle form submission
5+
form.addEventListener('submit', (e) => {
6+
e.preventDefault();
7+
8+
// Collect form data
9+
const fullName = form.querySelector('input[placeholder="Full Name"]').value.trim();
10+
const phoneNumber = form.querySelector('input[placeholder="Phone Number"]').value.trim();
11+
const emailId = form.querySelector('input[placeholder="Email ID"]').value.trim();
12+
const comments = form.querySelector('textarea[placeholder="Comments"]').value.trim();
13+
14+
// Client-side validation
15+
if (!fullName || !phoneNumber || !emailId || !comments) {
16+
alert('Please fill out all required fields.');
17+
return; // Stop the submission if validation fails
18+
}
19+
20+
// Log the form data in the console
21+
const formData = {
22+
fullName,
23+
phoneNumber,
24+
emailId,
25+
comments,
26+
};
27+
console.log(formData); // Log collected data
28+
29+
// Export options
30+
const exportType = prompt("Type 'CSV' for CSV export or 'EXCEL' for Excel export:");
31+
32+
if (exportType.toLowerCase() === 'csv') {
33+
exportToCSV(formData);
34+
} else if (exportType.toLowerCase() === 'excel') {
35+
exportToExcel(formData);
36+
} else {
37+
alert("Invalid option selected.");
38+
}
39+
40+
// Reset form
41+
form.reset();
42+
});
43+
44+
// Function to export data to CSV
45+
function exportToCSV(data) {
46+
const csvContent = `Full Name,Phone Number,Email ID,Comments\n${data.fullName},${data.phoneNumber},${data.emailId},${data.comments}`;
47+
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
48+
const link = document.createElement('a');
49+
const url = URL.createObjectURL(blob);
50+
link.setAttribute('href', url);
51+
link.setAttribute('download', 'form_data.csv');
52+
document.body.appendChild(link);
53+
link.click();
54+
document.body.removeChild(link);
55+
}
56+
57+
// Function to export data to Excel
58+
function exportToExcel(data) {
59+
const workbook = XLSX.utils.book_new();
60+
const worksheetData = [['Full Name', 'Phone Number', 'Email ID', 'Comments'],
61+
[data.fullName, data.phoneNumber, data.emailId, data.comments]];
62+
63+
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
64+
XLSX.utils.book_append_sheet(workbook, worksheet, 'Form Responses');
65+
66+
XLSX.writeFile(workbook, 'form_data.xlsx');
67+
}
68+
});

‎forms-portal/user-registration-form/style.css

+12-2
Original file line numberDiff line numberDiff line change
@@ -124,10 +124,20 @@ input[placeholder='Phone Number']::-webkit-inner-spin-button {
124124
}
125125

126126
input[type="number"] {
127-
-moz-appearance: textfield;
128-
/* Hides arrows for Firefox */
127+
128+
-moz-appearance: textfield; /* Hides arrows for Firefox */
129+
appearance: textfield; /* Standard property for other browsers */
130+
129131
}
130132

133+
/* Hides the spin buttons in WebKit browsers (like Chrome and Safari) */
134+
input[type="number"]::-webkit-inner-spin-button,
135+
input[type="number"]::-webkit-outer-spin-button {
136+
-webkit-appearance: none;
137+
margin: 0;
138+
}
139+
140+
131141
/* Adding subtle animation on page load */
132142
@keyframes fadeIn {
133143
from {

‎forms-portal/user-registration-form/userRegistrationForm.html

+18-19
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
3+
n
44
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Document</title>
8-
<link rel="stylesheet" href="style.css" />
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
910
</head>
10-
1111
<body>
12-
<div class="user-registration-form-container">
13-
14-
<h1>User Registration Form</h1>
15-
16-
<form class="user-registration-form">
17-
<input type="text" placeholder="Full Name" />
18-
<input type="number" placeholder="Phone Number" />
19-
<input type="text" placeholder="Email ID" />
20-
<textarea placeholder="Comments"></textarea>
21-
<button>Submit</button>
22-
</form>
23-
</div>
12+
<div class="user-registration-form-container">
13+
<h1>User Registration Form</h1>
14+
<form class="user-registration-form">
15+
<input type="text" placeholder="Full Name" required />
16+
<input type="number" placeholder="Phone Number" required />
17+
<input type="text" placeholder="Email ID" required />
18+
<textarea placeholder="Comments" required></textarea>
19+
<button>Submit</button>
20+
</form>
21+
</div>
22+
<script src="./formHandler.js"></script>
2423
</body>
24+
</html>
2525

26-
</html>

0 commit comments

Comments
 (0)