build a customer complaint form vallidation errors
hi totally blind, using the jaws screen reader 2025, nvda 2025, and windows narrator. not able to see the code. well have built the html, css and javascript. it is not passing, and did look at some sample code i found online from another student or person to get an idea how to do this. well have then googled and tried other versions. so some of the basic vallidation passes. and also did try this in my local copy of firefox and in the browser preview on the site. but when i run the tests, not passing all of them. so what am i doing wrong? how to get it to pass. have spent the last 2 to 3 days and have tried, and then rewritten the code a couple of times, js, have tested and tried to get this to pass. so asking for your help. any documentation or sample code samples to see what i am doing wrong. will paste the error list below. pasting now:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Customer Complaint Form</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Customer Complaint Form</h1> </header> <main> <form id="customer-form" novalidate> <div class="form-group"> <label for="full-name">Full Name:</label> <input type="text" id="full-name" name="full-name" required> <span class="error-message" aria-live="polite"></span> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <span class="error-message" aria-live="polite"></span> </div> <div class="form-group"> <label for="complaint">Complaint:</label> <textarea id="complaint" name="complaint" required></textarea> <span class="error-message" aria-live="polite"></span> </div> <div class="form-group"> <label for="priority">Priority:</label> <select id="priority" name="priority" required> <option value="">Select priority</option> <option value="low">Low</option> <option value="medium">Medium</option> <option value="high">High</option> </select> <span class="error-message" aria-live="polite"></span> </div> <button type="submit">Submit Complaint</button> </form> <div id="form-status" aria-live="polite"></div> </main> <script src="script.js"></script> </body> </html>
body {
font-family: Arial, sans-serif;
line-height: 1.5;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
background-color: #0077cc;
color: #fff;
padding: 1rem;
text-align: center;
}
main {
max-width: 600px;
margin: 2rem auto;
background-color: #fff;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
input, textarea, select {
width: 100%;
padding: 0.5rem;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 1rem;
}
textarea {
min-height: 100px;
}
button {
background-color: #0077cc;
color: #fff;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #005fa3;
}
.error-message {
color: red;
font-size: 0.9rem;
margin-top: 0.25rem;
display: block;
}
#form-status {
margin-top: 1rem;
font-weight: bold;
color: green;
}
Java Script:
// Helper: set border color
function setBorderColor(el, valid) {
if (!el) return;
el.style.borderColor = valid ? "green" : "red";
}
// Global function: validateForm
function validateForm() {
const form = document.getElementById("customer-form");
const validation = {
"full-name": false,
"email": false,
"order-no": false,
"product-code": false,
"quantity": false,
"complaints-group": false,
"complaint-description": false,
"solutions-group": false,
"solution-description": false
};
// Full Name
const fullName = form["full-name"].value.trim();
validation["full-name"] = fullName !== "";
setBorderColor(form["full-name"], validation["full-name"]);
// Email
const email = form["email"].value.trim();
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
validation["email"] = emailPattern.test(email);
setBorderColor(form["email"], validation["email"]);
// Order Number
const orderNo = form["order-no"].value.trim();
validation["order-no"] = orderNo !== "";
setBorderColor(form["order-no"], validation["order-no"]);
// Product Code
const productCode = form["product-code"].value.trim();
validation["product-code"] = productCode !== "";
setBorderColor(form["product-code"], validation["product-code"]);
// Quantity
const quantity = form["quantity"].value.trim();
validation["quantity"] = quantity !== "" && Number(quantity) > 0;
setBorderColor(form["quantity"], validation["quantity"]);
// Complaints group (checkboxes)
const complaints = form.querySelectorAll("input[name='complaints']");
validation["complaints-group"] = Array.from(complaints).some(c => c.checked);
setBorderColor(document.getElementById("complaints-group"), validation["complaints-group"]);
// Complaint description (Other)
const otherComplaint = document.getElementById("other-complaint");
const complaintDesc = document.getElementById("complaint-description");
if (otherComplaint.checked) {
validation["complaint-description"] = complaintDesc.value.trim().length >= 20;
setBorderColor(complaintDesc, validation["complaint-description"]);
} else {
validation["complaint-description"] = true;
complaintDesc.style.borderColor = "";
}
// Solutions group (radio)
const solutions = form.querySelectorAll("input[name='solutions']");
validation["solutions-group"] = Array.from(solutions).some(r => r.checked);
setBorderColor(document.getElementById("solutions-group"), validation["solutions-group"]);
// Solution description (Other)
const otherSolution = document.getElementById("other-solution");
const solutionDesc = document.getElementById("solution-description");
if (otherSolution.checked) {
validation["solution-description"] = solutionDesc.value.trim().length >= 20;
setBorderColor(solutionDesc, validation["solution-description"]);
} else {
validation["solution-description"] = true;
solutionDesc.style.borderColor = "";
}
return validation;
}
// Global function: isValid
function isValid(validationObj) {
return Object.values(validationObj).every(v => v === true);
}
// Add change/input listeners for live validation
function addChangeListeners() {
const form = document.getElementById("customer-form");
const fields = [
"full-name",
"email",
"order-no",
"product-code",
"quantity",
"complaint-description",
"solution-description"
];
fields.forEach(id => {
const el = document.getElementById(id);
if (el) {
el.addEventListener("input", validateForm);
el.addEventListener("change", validateForm);
}
});
const complaints = form.querySelectorAll("input[name='complaints']");
complaints.forEach(c => c.addEventListener("change", validateForm));
const solutions = form.querySelectorAll("input[name='solutions']");
solutions.forEach(r => r.addEventListener("change", validateForm));
}
// Initialize
document.addEventListener("DOMContentLoaded", () => {
addChangeListeners();
const form = document.getElementById("customer-form");
const statusDiv = document.getElementById("form-status");
form.addEventListener("submit", (e) => {
e.preventDefault();
const validation = validateForm();
if (isValid(validation)) {
statusDiv.textContent = "Form submitted successfully!";
form.reset();
// Reset borders
Array.from(form.elements).forEach(el => el.style.borderColor = "");
document.getElementById("complaints-group").style.borderColor = "";
document.getElementById("solutions-group").style.borderColor = "";
} else {
statusDiv.textContent = "";
}
});
});
Project :
so can you help me out. totally blind. and using windows 11 pro 2024. using firefox as my primary browser. i do have chrome and edge and tested it as well. does do all the relevant tests like:
vallidation errors if blank fields. and the submit button.
if all fields are entere then success message, as i cannot see and dont have the aria accessibility to speak out vallidation errors if this was a real world production app or page and not a . so can you help.
thank you.
Marvin.learning environemtn.Tell us what’s happening:
hi doing the customer complaint form, not passing and blind and using a screen reader.
Your code so far
html
<!-- file: index.html -->
css
/* file: styles.css */
js
/* file: script.js */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form