Tell us what’s happening:
hi, please help, i can’t pass 30. i already checked but the isvalid does return true when all the fields is filled correctly. thank you
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
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
}
function regexPlaceholder(placeholder) {
const wildcards = {
'#': '\\d',
'X': '[a-zA-Z]',
'@': '[a-zA-Z0-0]'
};
let pattern = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
pattern = pattern.replace(/[#X@]/g, (match) => wildcards[match]);
console.log(pattern)
return new RegExp(`^${pattern}$`, "i");
}
const formComponent = {}
for(const prop in validation) {
formComponent[prop] = document.querySelector(`#${prop}`)
formComponent[prop].addEventListener("change", () => {
if(validateForm()[prop]) {
formComponent[prop].style.borderColor = "green";
}
else {
formComponent[prop].style.borderColor = "red";
}
})
}
function validateForm() {
for(const prop in validation) {
if(formComponent[prop].type === "email") {
validation[prop] = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formComponent[prop].value);
}
else if(formComponent[prop].type === "text") {
if(formComponent[prop].value !== "") {
if(formComponent[prop].placeholder == "") {
validation[prop] = true;
}
else {
validation[prop] = regexPlaceholder(formComponent[prop].placeholder).test(formComponent[prop].value);
}
}
else validation[prop] = false;
}
else if(formComponent[prop].type === "textarea") {
if(formComponent[prop].value.length >= 20) {
validation[prop] = true;
}
else validation[prop] = false;
}
else if(formComponent[prop].type === "number") {
validation[prop] = parseInt(formComponent[prop].value) > 0;
}
else if(formComponent[prop].type === "fieldset") {
if(formComponent[prop].querySelector('input[type="checkbox"]:checked') ||formComponent[prop].querySelector('input[type="radio"]:checked')) {
validation[prop] = true;
}
else validation[prop] = false;
}
}
console.log(validation)
return validation;
}
function isValid(object) {
return Object.values(object).every(value => value === true);
}
document.querySelector("#form").addEventListener("submit", (event) => {
event.preventDefault();
console.log(isValid(validateForm()));
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form
