Build a Customer Complaint Form - Build a Customer Complaint Form

JavaScript
1

Tell us what’s happening:

The test 30 of the user’s stories keeps failing and I don’t know what is the problem, the isValid function return true when all the input are correctly filled and false otherwise.
Thank you in advance for helping me!

Your code so far

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Customer Complaint Form</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Complaint Form</h1>
    <form id="form">
        <fieldset id="personal-info">
            <div>
                <label for="full-name">Full Name:</label>
                <input type="text" id="full-name" name="full-name" placeholder="John Doe">
            </div>

            <div>
                <label for="email">Email Address:</label>
                <input type="email" id="email" name="email" placeholder="example@domain.com">
            </div>
        </fieldset>
        <hr>
        <fieldset id="product-info">
            <div>
                <label for="order-no">Order No:</label>
                <input type="text" id="order-no" name="order-no" placeholder="2024######">
            </div>
            <div>
                <label for="product-code">Product Code:</label>
                <input type="text" id="product-code" name="product-code" placeholder="XX##-X###-XX#">
            </div>
            <div>
                <label for="quantity">Quantity:</label>
                <input type="number" id="quantity" name="quantity" min="1">
            </div>
        </fieldset>

        <fieldset id="complaints-group">
            <legend>Complaint Reason:</legend>
            <div>
                <input type="checkbox" id="damaged-product" name="complaint" value="damaged-product">
                <label for="damaged-product">Damaged Product</label>
            </div>

            <div>
                <input type="checkbox" id="nonconforming-product" name="complaint" value="nonconforming-product">
                <label for="nonconforming-product">Nonconforming Product</label>
            </div>

            <div>
                <input type="checkbox" id="delayed-dispatch" name="complaint" value="delayed-dispatch">
                <label for="delayed-dispatch">Delayed Dispatch</label>
            </div>

            <div>
                <input type="checkbox" id="other-complaint" name="complaint" value="other">
                <label for="other-complaint">Other</label>
            </div>
        </fieldset>

        <div id="complaint-description-container">
            <legend>Description of Complaint Reason</legend>
            <textarea placeholder="Describe the reason of your complaint in at least 20 characters"
                name="complaint-textarea" id="complaint-description"></textarea>
        </div>

        <fieldset id="solutions-group">
            <legend>Desired Solution</legend>
            <input type="radio" name="solutions" id="refund" value="refund">
            <label for="refund">Refund</label>

            <input type="radio" name="solutions" id="exchange" value="exchange">
            <label for="exchange">Exchange</label>

            <input type="radio" name="solutions" id="other-solution" value="other">
            <label for="other-solution">Other</label>
        </fieldset>

        <div id="solution-description-container">
            <legend>Description of Desired Solution</legend>
            <textarea placeholder="Describe the desired solution to your issue in at least 20 characters"
                name="solution-textarea" id="solution-description"></textarea>
        </div>
        <div id="btn-container">
            <button type="submit" id="submit-btn">Submit</button>
            <span id="message-box" aria-live="polite"></span>
        </div>

    </form>

    <script src="script.js"></script>
</body>

</html>


/* file: styles.css */


const form = document.querySelector('#form');

const nameInput = document.querySelector('#full-name');
const emailInput = document.querySelector('#email');
const orderNoInput = document.querySelector('#order-no');
const productCode = document.querySelector('#product-code');
const quantityInput = document.querySelector('#quantity');
const complaintsGroup = document.querySelectorAll('input[type="checkbox"]');
const complaintDescription = document.querySelector('#complaint-description');
const solutionsGroup = document.querySelectorAll('input[type="radio"]');
const solutionDescription = document.querySelector('#solution-description');
const submitBtn = document.querySelector('#submit-btn');

const emailFormat = /^[^\s@]+@[^\s@]+\.[^\s@]+$/i;
const productCodeFormat = /^\w{2}\d{2}-\w{1}\d{3}-\w{2}\d/i;
const orderNoFormat = /^2024\d{6}/;

form.addEventListener('change', styleForm);

function isChecked(inputs){
  return Array.from(inputs).some(input=>input.checked);
}

function validateForm(){

  return {
    'full-name' : nameInput.value.trim().length > 0 , //nameInput.value !== '' ? true : false,
    'email': emailFormat.test(emailInput.value.trim()),
    'order-no': orderNoFormat.test(orderNoInput.value),
    'product-code': productCodeFormat.test(productCode.value),
    'quantity' :  parseInt(quantityInput.value) > 0 ? true : false,
    'complaints-group' : isChecked(complaintsGroup),
    'complaint-description' : complaintDescription.value.length >= 20 ? true : false,
    'solutions-group' : isChecked(solutionsGroup),
    'solution-description' : solutionDescription.value.length >= 20 ? true : false 
  }
}

function isValid(formObj) {
  console.log('running isValid');
  let correctlyFilled = true;
  for (const key in formObj) {
    if (formObj[key] !== true) {
      correctlyFilled = false;
    }
  }
  console.log(correctlyFilled);
  return correctlyFilled;
}




function styleForm(){
  // get the false values from validateForm
  const formInputs = validateForm();
  for(const input in formInputs){
    if(formInputs[input]){
      document.querySelector(`#${input}`).style.borderColor = 'green';
    }else{
      document.querySelector(`#${input}`).style.borderColor = 'red';
    }
  }
}

  form.addEventListener('submit', () => {
  isValid(validateForm());
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

Build a Customer Complaint Form - Build a Customer Complaint Form

2

Please explain what you think this is doing.

1 Like
3

I’m sorry for responding too late, I think it is returning an object with the values of the keys ‘true’ or ‘false’ based on the tests made, like this example :
{
‘full-name’ : true
‘email’: true
‘order-no’: true
‘product-code’: true
‘quantity’ : true
‘complaints-group’ : true
‘complaint-description’ : true
‘solutions-group’ : true,
‘solution-description’ : true
}

1 Like
4

That’s okay. Did you notice that your complaint and solution description fields are styled as not valid even when they are not required? Also, your form is submitting every time regardless of whether you form validates. What can you do to prevent that?

1 Like
5

1-Yes, as soon as I fill the first input, all the other inputs are styled even if they weren’t filled yet.
2-To prevent it from submitting when the form is not valid, I should use prevent.default
Thank you, I will try to fix these first and come back later to tell you how it went

1 Like