Skip to content
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

Feature/client side validation #49

Merged
merged 4 commits into from
Oct 16, 2024
Merged

Feature/client side validation #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f94ace
Add form submission handling and console logging functionality
Valley-15 Oct 16, 2024
bc33dc5
Add functionality to export form responses as CSV or Excel
Valley-15 Oct 16, 2024
b5650f7
Implement client-side validation for the user registration form
Valley-15 Oct 16, 2024
15ce123
Merge branch 'main' into feature/client-side-validation
Valley-15 Oct 16, 2024
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
68 changes: 68 additions & 0 deletions forms-portal/user-registration-form/formHandler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
document.addEventListener("DOMContentLoaded", () => {
const form = document.querySelector('.user-registration-form');

// Handle form submission
form.addEventListener('submit', (e) => {
e.preventDefault();

// Collect form data
const fullName = form.querySelector('input[placeholder="Full Name"]').value.trim();
const phoneNumber = form.querySelector('input[placeholder="Phone Number"]').value.trim();
const emailId = form.querySelector('input[placeholder="Email ID"]').value.trim();
const comments = form.querySelector('textarea[placeholder="Comments"]').value.trim();

// Client-side validation
if (!fullName || !phoneNumber || !emailId || !comments) {
alert('Please fill out all required fields.');
return; // Stop the submission if validation fails
}

// Log the form data in the console
const formData = {
fullName,
phoneNumber,
emailId,
comments,
};
console.log(formData); // Log collected data

// Export options
const exportType = prompt("Type 'CSV' for CSV export or 'EXCEL' for Excel export:");

if (exportType.toLowerCase() === 'csv') {
exportToCSV(formData);
} else if (exportType.toLowerCase() === 'excel') {
exportToExcel(formData);
} else {
alert("Invalid option selected.");
}

// Reset form
form.reset();
});

// Function to export data to CSV
function exportToCSV(data) {
const csvContent = `Full Name,Phone Number,Email ID,Comments\n${data.fullName},${data.phoneNumber},${data.emailId},${data.comments}`;
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', 'form_data.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}

// Function to export data to Excel
function exportToExcel(data) {
const workbook = XLSX.utils.book_new();
const worksheetData = [['Full Name', 'Phone Number', 'Email ID', 'Comments'],
[data.fullName, data.phoneNumber, data.emailId, data.comments]];

const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
XLSX.utils.book_append_sheet(workbook, worksheet, 'Form Responses');

XLSX.writeFile(workbook, 'form_data.xlsx');
}
});
14 changes: 12 additions & 2 deletions forms-portal/user-registration-form/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,10 +124,20 @@ input[placeholder='Phone Number']::-webkit-inner-spin-button {
}

input[type="number"] {
-moz-appearance: textfield;
/* Hides arrows for Firefox */

-moz-appearance: textfield; /* Hides arrows for Firefox */
appearance: textfield; /* Standard property for other browsers */

}

/* Hides the spin buttons in WebKit browsers (like Chrome and Safari) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}


/* Adding subtle animation on page load */
@keyframes fadeIn {
from {
Expand Down
37 changes: 18 additions & 19 deletions forms-portal/user-registration-form/userRegistrationForm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
<!DOCTYPE html>
<html lang="en">

n
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</head>

<body>
<div class="user-registration-form-container">

<h1>User Registration Form</h1>

<form class="user-registration-form">
<input type="text" placeholder="Full Name" />
<input type="number" placeholder="Phone Number" />
<input type="text" placeholder="Email ID" />
<textarea placeholder="Comments"></textarea>
<button>Submit</button>
</form>
</div>
<div class="user-registration-form-container">
<h1>User Registration Form</h1>
<form class="user-registration-form">
<input type="text" placeholder="Full Name" required />
<input type="number" placeholder="Phone Number" required />
<input type="text" placeholder="Email ID" required />
<textarea placeholder="Comments" required></textarea>
<button>Submit</button>
</form>
</div>
<script src="./formHandler.js"></script>
</body>
</html>

</html>
Loading