Apologies the script didn’t follow over. I’ll put it in the replies for now.
const fullName = document.getElementById(“full-name”);
const email = document.getElementById(“email”);
const orderNum = document.getElementById(“order-no”);
const productCode = document.getElementById(“product-code”);
const quantity = document.getElementById(“quantity”);
const complaintGroup = document.getElementById(“complaints-group”);
const complaintDescr = document.getElementById(“complaint-description”);
const solutionGroup = document.getElementById(“solutions-group”);
const solutionDescr = document.getElementById(“solution-description”);
const submitBtn = document.getElementById(“submit-btn”);
//Use .checked for boolean result
const damaged = document.getElementById(“damaged-product”);
const noncon = document.getElementById(“nonconforming-product”);
const delayed = document.getElementById(“delayed-dispatch”);
const ComplOther = document.getElementById(“other-complaint”);
const refund = document.getElementById(“refund”);
const exchange = document.getElementById(“exchange”);
const solutionOther = document.getElementById(“other-solution”);
const transitionObj = {
'full-name':fullName,
'email':email,
'order-no':orderNum,
'product-code':productCode,
'quantity':quantity,
'complaints-group': complaintGroup,
'complaint-description':complaintDescr,
'solutions-group': solutionGroup,
'solution-description':solutionDescr
}
function validateForm(){
let formObj = {
'full-name':false,
'email':false,
'order-no':false,
'product-code':false,
'quantity':false,
'complaints-group':false,
'complaint-description':true,
'solutions-group':false,
'solution-description':true
}
if(fullName.value !== null && fullName.value !== undefined && fullName.value.length >=1){
console.log(fullName.value.length)
console.log(fullName.value)
console.log(typeof fullName.value)
formObj\["full-name"\]=true
}
if(email.checkValidity() && email.value !== null && email.value !== undefined && email.value.length > 1){
formObj\["email"\] = email.checkValidity()
}
if(orderNum.checkValidity() && orderNum.value !== null && orderNum.value !== undefined && orderNum.value.length > 1 ){
formObj\["order-no"\] = orderNum.checkValidity()
}
if(productCode.checkValidity() && productCode.value !== null && productCode.value !== undefined && productCode.value.length > 1 ){
formObj\["product-code"\] = productCode.checkValidity()
}
console.log(quantity)
if(quantity.value > 0 && /\[1-9\]+/gi.test(quantity.value) && !/\[a-z\]/gi.test(quantity.value)){
formObj\["quantity"\] = true
}
if(damaged.checked||noncon.checked||delayed.checked||ComplOther.checked){
formObj\["complaints-group"\] = true
}
if(!ComplOther.checked && complaintDescr.value.length > 20 || ComplOther.checked && complaintDescr.value.length < 20){
formObj\["complaint-description"\] = false
}
if(refund.checked||exchange.checked||solutionOther.checked){
formObj\["solutions-group"\] = true
}
if(!solutionOther.checked && solutionDescr.value.length > 20 || solutionOther.checked && solutionDescr.value.length < 20){
formObj\["solution-description"\] = false
}
return formObj
}
function isValid(obj){
Object.keys(obj).forEach(key => {
let el = transitionObj\[key\]
if(obj\[key\]==true){
el.style.borderColor = "green"
}
else{
el.style.borderColor = "red"
}
})
form.addEventListener("change", ()=>{
isValid(validateForm())
})
}
submitBtn.addEventListener(“click”, isValid(validateForm()))
/* Patterns
email: “.+@.+\.(com|gov|org|io|co)”
order-no: “2024\d{6}”
product-code: “[a-zA-Z][a-zA-Z]\d\d-[a-zA-Z]\d\d\d-[a-zA-Z][a-zA-Z]\d”
*/
