Error handling

Introduction

We are now checking for validation errors on the form, but the user experience feels a bit clunky.

For example, if the user submits a form with more than one error, they are shown multiple alerts for each mistake.

Let’s see if we can improve this. In this guide we will:

Collect all errors into an object
Create a helper function to add error messages to the object
Use a loop to process each error
update our user interface to show each form field that needs correcting

Collect errors into an object

Firstly, let’s add an object to collect all the errors into, together with a helper function to add error messages:

Open index.js and add the line highlighted in green below:

1
// Capture user's input on form submission
2
let form = document.querySelector("form");
3

4
form.addEventListener("submit", function (event) {
5
  event.preventDefault();
12 collapsed lines
6

7
  const maxHoursPerLevel = {
8
    basic: 5,
9
    advanced: 10,
10
  };
11

12
  // Store the user's email address as userEmail (string/text)
13
  let userEmail = document.querySelector("#email").value;
14
  // Store the user's level as userLevel (string/text)
15
  let userLevel = document.querySelector("#level").value;
16
  // Store the user's hours of study as userHours (number)
17
  let userHours = parseInt(document.querySelector("#hoursPerWeek").value);
18

19
  // Validate the user's input
20
  let errors = {};
21

22
  // Helper function to add error messages
23
  function addError(field, message) {
24
    if (!errors[field]) {
25
      errors[field] = { messages: [] };
26
    }
27
    errors[field].messages.push(message);
28
  }
29

34 collapsed lines
30
  // Check if the user has provided an email address
31
  if (userEmail === "") {
32
    alert("Please enter your email address.");
33

34
    return;
35
  }
36

37
  // Check if the user has selected a level
38
  if (userLevel === "") {
39
    alert("Please select a level of study");
40
  }
41

42
  // Check if the user has specified at least one hour of study
43
  if (isNaN(userHours) || userHours < 1) {
44
    alert("Please enter at least one hour of tuition.");
45

46
    return;
47
  }
48

49
  // Check if the userLevel exists in the maxHoursPerLevel object
50
  if (!maxHoursPerLevel.hasOwnProperty(userLevel)) {
51
    alert("Invalid level of study selected.");
52

53
    return;
54
  }
55
  // Check if the number of hours requested is within the allowed range
56
  const maxAllowedHours = maxHoursPerLevel[userLevel];
57
  if (userHours > maxAllowedHours) {
58
    alert(`You can only study a maximum of ${maxAllowedHours} hours per week.`);
59

60
    return;
61
  }
62

63
  console.log({ userEmail, userLevel, userHours });
64
});
65
// Calculate the total cost
66
// Display the total cost to the user

Next, we will replace all the alert messages with objects that we will push into the errors array.

Carefully delete the lines highlighted in red below and replace them with those highlighted in green:

1
// Capture user's input on form submission
2
let form = document.querySelector("form");
3

4
form.addEventListener("submit", function (event) {
5
  event.preventDefault();
12 collapsed lines
6

7
  const maxHoursPerLevel = {
8
    basic: 5,
9
    advanced: 10,
10
  };
11

12
  // Store the user's email address as userEmail (string/text)
13
  let userEmail = document.querySelector("#email").value;
14
  // Store the user's level as userLevel (string/text)
15
  let userLevel = document.querySelector("#level").value;
16
  // Store the user's hours of study as userHours (number)
17
  let userHours = parseInt(document.querySelector("#hoursPerWeek").value);
18

19
  // Validate the user's input
20
  let errors = {};
21

22
  // Helper function to add error messages
23
  function addError(field, message) {
24
    if (!errors[field]) {
25
      errors[field] = { messages: [] };
26
    }
27
    errors[field].messages.push(message);
28
  }
29

30
  // Check if the user has provided an email address
31
  if (userEmail === "") {
32
    alert("Please enter your email address.");
33
    addError("email", "Please enter your email address.");
34

35
    return;
36
  }
37

38
  // Check if the user has selected a level
39
  if (userLevel === "") {
40
    alert("Please select a level of study");
41
    addError("level", "Please select a level of study.");
42

43
    return;
44
  }
45

46
  // Check if the user has specified at least one hour of study
47

48
  // Check if the user has specified at least one hour of study
49
  if (isNaN(userHours) || userHours < 1) {
50
    alert("Please enter at least one hour of tuition.");
51
    addError("hoursPerWeek", "Please enter at least one hour of tuition.");
52

53

54
    return;
55
  }
56

57
  // Check if the userLevel exists in the maxHoursPerLevel object
58
  if (!maxHoursPerLevel.hasOwnProperty(userLevel)) {
59
    alert("Invalid level of study selected.");
60
    addError("level", "Invalid level of study selected.");
61

62
    return;
63
  }
64

65
  // Check if the number of hours requested is within the allowed range
66
  const maxAllowedHours = maxHoursPerLevel[userLevel];
67
  if (userHours > maxAllowedHours) {
68
    alert(`You can only study a maximum of ${maxAllowedHours} hours per week.`);
69
    addError(
70
      "hoursPerWeek",
71
      `You can only study a maximum of ${maxAllowedHours} hours per week.`
72
    );
73

74
    return;
75
  }
76

77
  console.log({ userEmail, userLevel, userHours });
78
  console.log({ errors });
79
});
80
// Calculate the total cost
81
// Display the total cost to the user

We no longer want to return from the function if there is an error at this point, as we want to collect all the errors before displaying them to the user.

Let’s test the new error handling by submitting the form with some errors.

Fill in the form with some errors and submit it.

You should see all the errors are now collected into a single object in the console.

We can use this single object to display all the error messages to the user at once 😎.

Style input fields with errors

The first thing we should do is style the input fields that have errors.

Open index.css and add the following CSS:

1
:root {
2
  --black: rgb(22, 22, 22);
3
  --white: rgb(255, 255, 255);
4
  --grey-50: rgb(250, 250, 250);
5
  --grey-300: rgb(192, 198, 201);
6
  --grey-500: rgb(88, 104, 112);
7
  --brand-light: rgb(255, 90, 58);
8
  --brand-dark: rgb(172, 62, 41);
9
  --sky-500: rgb(14 165 233);
10
  --box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
11
    0 4px 6px -4px rgb(0 0 0 / 0.1);
12
  --error-bkg: rgb(255, 241, 241);
13
  --error-placeholder: rgb(255, 157, 157);
14
}
75 collapsed lines
15
* {
16
  color: var(--grey-500);
17
  box-sizing: border-box;
18
  font-family: Arial, Helvetica, sans-serif;
19
  margin: 0;
20
}
21
button {
22
  cursor: pointer;
23
}
24
.form-wrapper {
25
  display: flex;
26
  background-color: var(--grey-50);
27
  min-height: 100vh;
28
}
29
.form-section {
30
  width: calc(50% - 1px);
31
  display: flex;
32
  flex-grow: 1;
33
  flex-direction: column;
34
  justify-content: center;
35
  align-items: flex-start;
36
  gap: 2rem;
37
  padding: 2rem 4rem;
38
}
39
.form-section:first-of-type {
40
  border-right: 1px solid var(--grey-300);
41
}
42
.form-field {
43
  display: flex;
44
  flex-direction: column;
45
  gap: 0.5rem;
46
  align-items: flex-start;
47
  width: 100%;
48
}
49
.form-label {
50
  font-size: 1.25rem;
51
}
52
.form-input {
53
  background-color: var(--white);
54
  border-radius: 999px;
55
  border: 1px solid var(--grey-300);
56
  font-size: 1.5rem;
57
  padding: 0.75rem 1.5rem;
58
  font-weight: 300;
59
  color: var(--black);
60
  width: 100%;
61
}
62
.form-input::placeholder {
63
  color: var(--grey-300);
64
}
65
.form-input:focus {
66
  outline: none;
67
  outline: 2px solid var(--sky-500);
68
  box-shadow: var(--box-shadow-lg);
69
}
70
.mobile-display {
71
  display: none;
72
}
73
.submit-btn {
74
  border-radius: 1.75rem;
75
  margin: 0 auto;
76
  text-align: center;
77
  color: var(--white);
78
  border: 0;
79
  padding: 0.75rem 2rem;
80
  font-size: 1.5rem;
81
  background: linear-gradient(
82
    180deg,
83
    var(--brand-light) 0%,
84
    var(--brand-dark) 100%
85
  );
86
  transition: all 0.3s ease;
87
  outline: none;
88
  box-shadow: none;
89
}
90
.submit-btn:hover {
91
  outline: 1px solid var(--brand-dark);
92
  box-shadow: var(--box-shadow-lg);
93
  transition: all 0.3s ease;
94
}
95

96
.error-input {
97
  background-color: var(--error-bkg);
98
  color: var(--brand-dark);
99
  border-color: var(--brand-dark);
100
}
101
.error-input::placeholder {
102
  color: var(--error-placeholder);
103
}
104
.error-label {
105
  color: var(--brand-dark);
106
}
107

108
@media screen and (max-width: 640px) {
109
  .mobile-hidden {
110
    display: none;
111
  }
112
  .mobile-display {
113
    display: block;
114
  }
115
}

This CSS will simply style the input fields with errors with a red background, border, label and placeholder text.

Next, we will use JavaScript to apply this class to any input fields that contain errors.

Open index.js. Add the code highlighted below just above the final console.log() statement:

1
// Capture user's input on form submission
2
let form = document.querySelector("form");
3

4
form.addEventListener("submit", function (event) {
5
  event.preventDefault();
6

59 collapsed lines
7
  const maxHoursPerLevel = {
8
    basic: 5,
9
    advanced: 10,
10
  };
11

12
  // Store the user's email address as userEmail (string/text)
13
  let userEmail = document.querySelector("#email").value;
14
  // Store the user's level as userLevel (string/text)
15
  let userLevel = document.querySelector("#level").value;
16
  // Store the user's hours of study as userHours (number)
17
  let userHours = document.querySelector("#hoursPerWeek").value;
18

19
  // Validate the user's input
20
  let errors = {};
21

22
  // Helper function to add error messages
23
  function addError(field, message) {
24
    if (!errors[field]) {
25
      errors[field] = { messages: [] };
26
    }
27
    errors[field].messages.push(message);
28
  }
29

30
  // Check if the user has provided an email address
31
  if (userEmail === "") {
32
    addError("email", "Please enter your email address.");
33
  }
34

35
  // Check if the user has selected a level
36
  if (userLevel === "") {
37
    addError("level", "Please select a level of study");
38
  }
39

40
  // Check if the user has specified at least one hour of study
41
  if (userHours === "") {
42
    addError(
43
      "hoursPerWeek",
44
      "Please specify how many hours of tuition you would like."
45
    );
46
  }
47
  if (userHours < 1) {
48
    addError("hoursPerWeek", "Please enter at least one hour of tuition.");
49
  }
50

51
  // Check if the userLevel exists in the maxHoursPerLevel object
52
  if (!maxHoursPerLevel.hasOwnProperty(userLevel)) {
53
    addError("level", "Invalid level of study selected.");
54
  }
55

56
  // Check if the number of hours requested is within the allowed range
57
  const maxAllowedHours = maxHoursPerLevel[userLevel];
58
  if (userHours > maxAllowedHours) {
59
    addError(
60
      "hoursPerWeek",
61
      `You can only study a maximum of ${maxAllowedHours} hours per week.`
62
    );
63
  }
64

65
  // Add error class to input elements with errors
66
  for (let field in errors) {
67
    let inputElement = document.querySelector(`#${field}`);
68
    let labelElement = document.querySelector(`label[for=${field}]`);
69
    if (inputElement) {
70
      inputElement.classList.add("error-input");
71
    }
72
    if (labelElement) {
73
      labelElement.classList.add("error-label");
74
    }
75
  }
76

77
  console.log({ errors });
78
});
79
// Calculate the total cost
80
// Display the total cost to the user

Try this in your browser now.

You should see any input fields that have errors are now styled with a red background, border, label and placeholder text.

Understanding the code

We loop through the errors object and get the field name from its keys.

for (let field in errors) {
  // code here
}

So, for example, if the errors object looks like this:

{
  email: { messages: ["Please enter your email address."] },
  level: { messages: ["Please select a level of study"] },
  hoursPerWeek: { messages: ["Please specify how many hours of tuition you would like."] }
}

The field variable will be set to email, level, and hoursPerWeek respectively.

We then get the input element with matching field id and add the error-input class to it:
```
let inputElement = document.querySelector(`#${field}`);
if (inputElement) {
  inputElement.classList.add("error-input");
}
```
The classList property is a powerful feature of JavaScript that allows us to add, remove, or toggle CSS classes on an element, and thereby update its appearance dynamically.

You can read more about the classList property in the MDN web docs.

We also get the label element with a for attribute that matches the field value, and then add the error-label class to it:

let labelElement = document.querySelector(`label[for=${field}]`);
if (labelElement) {
  labelElement.classList.add("error-label");
}

With this code in place, any input fields with errors will be styled with a red background, border, label and placeholder text:

Styled input fields with errors

Display error messages

The final step is to display the error messages to the user.

To do this, we will need to:

update the HTML to include an empty div element for each error message
use JavaScript to populate these new div elements dynamically with the error messages.

Open index.html and look carefully for each div element with the class form-field.

Inside each of these, just below the input element, add an empty div element with an id attribute that closely matches the id attribute of its corresponding input element:


14 collapsed lines
1
<!DOCTYPE html>
2
  <html>
3
    <head>
4
      <title>Harmony | Sign Up</title>
5
      <link rel="stylesheet" href="./index.css" />
6
    </head>
7
    <body>
8
      <form class="form-wrapper">
9
        <div class="form-section">
10
          <img
11
            class="mobile-display"
12
            src="./assets/harmony-music-academy-logo.svg"
13
            alt="Harmony Music Academy logo"
14
          />
15
          <div class="form-field">
16
            <label for="email" class="form-label">Email*</label>
17
            <input
18
              id="email"
19
              name="email"
20
              type="email"
21
              class="form-input"
22
              placeholder="Your email"
23
            />
24
           <div id="email-error"></div>
25
          </div>
26
          <div class="form-field">
27
            <label for="level" class="form-label">Level*</label>
28
            <select id="level" name="level" class="form-input">
29
              <option value="basic">Basic</option>
30
              <option value="advanced">Advanced</option>
31
            </select>
32
           <div id="level-error"></div>
33
          </div>
34
          <div class="form-field">
35
            <label for="hoursPerWeek" class="form-label">Hours per week*</label>
36
            <input
37
              id="hoursPerWeek"
38
              name="hours-per-week"
39
              type="number"
40
              class="form-input"
41
              placeholder="How many?"
42
            />
43
           <div id="hoursPerWeek-error"></div>
44
          </div>
15 collapsed lines
45

46
          <button type="submit" class="submit-btn">Sign up</button>
47
        </div>
48

49
        <div class="form-section mobile-hidden">
50
          <img
51
            src="./assets/harmony-music-academy-logo.svg"
52
            alt="Harmony Music Academy logo"
53
          />
54
        </div>
55
      </form>
56

57
      <script type="module" src="./index.js"></script>
58
    </body>
59
  </html>

We have added a div element with an id attribute that matches the id attribute of the corresponding input element. This will allow us to target the div element and populate it with the error message.

Next let’s add the styles for this new element.

Open index.css, and add the code highlighted below, just below the other error stylings we added earlier:


103 collapsed lines
1
:root {
2
  --black: rgb(22, 22, 22);
3
  --white: rgb(255, 255, 255);
4
  --grey-50: rgb(250, 250, 250);
5
  --grey-300: rgb(192, 198, 201);
6
  --grey-500: rgb(88, 104, 112);
7
  --brand-light: rgb(255, 90, 58);
8
  --brand-dark: rgb(172, 62, 41);
9
  --sky-500: rgb(14 165 233);
10
  --box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
11
    0 4px 6px -4px rgb(0 0 0 / 0.1);
12
  --error-bkg: rgb(255, 241, 241);
13
  --error-placeholder: rgb(255, 157, 157);
14
}
15
* {
16
  color: var(--grey-500);
17
  box-sizing: border-box;
18
  font-family: Arial, Helvetica, sans-serif;
19
  margin: 0;
20
}
21
button {
22
  cursor: pointer;
23
}
24
.form-wrapper {
25
  display: flex;
26
  background-color: var(--grey-50);
27
  min-height: 100vh;
28
}
29
.form-section {
30
  width: calc(50% - 1px);
31
  display: flex;
32
  flex-grow: 1;
33
  flex-direction: column;
34
  justify-content: center;
35
  align-items: flex-start;
36
  gap: 2rem;
37
  padding: 2rem 4rem;
38
}
39
.form-section:first-of-type {
40
  border-right: 1px solid var(--grey-300);
41
}
42
.form-field {
43
  display: flex;
44
  flex-direction: column;
45
  gap: 0.5rem;
46
  align-items: flex-start;
47
  width: 100%;
48
}
49
.form-label {
50
  font-size: 1.25rem;
51
}
52
.form-input {
53
  background-color: var(--white);
54
  border-radius: 999px;
55
  border: 1px solid var(--grey-300);
56
  font-size: 1.5rem;
57
  padding: 0.75rem 1.5rem;
58
  font-weight: 300;
59
  color: var(--black);
60
  width: 100%;
61
}
62
.form-input::placeholder {
63
  color: var(--grey-300);
64
}
65
.form-input:focus {
66
  outline: none;
67
  outline: 2px solid var(--sky-500);
68
  box-shadow: var(--box-shadow-lg);
69
}
70
.mobile-display {
71
  display: none;
72
}
73
.submit-btn {
74
  border-radius: 1.75rem;
75
  margin: 0 auto;
76
  text-align: center;
77
  color: var(--white);
78
  border: 0;
79
  padding: 0.75rem 2rem;
80
  font-size: 1.5rem;
81
  background: linear-gradient(
82
    180deg,
83
    var(--brand-light) 0%,
84
    var(--brand-dark) 100%
85
  );
86
  transition: all 0.3s ease;
87
  outline: none;
88
  box-shadow: none;
89
}
90
.submit-btn:hover {
91
  outline: 1px solid var(--brand-dark);
92
  box-shadow: var(--box-shadow-lg);
93
  transition: all 0.3s ease;
94
}
95

96
.error-input {
97
  background-color: var(--error-bkg);
98
  color: var(--brand-dark);
99
  border-color: var(--brand-dark);
100
}
101
.error-input::placeholder {
102
  color: var(--error-placeholder);
103
}
104
.error-label {
105
  color: var(--brand-dark);
106
}
107
.error-message ul {
108
  padding-left: 0;
109
}
110
.error-message ul li {
111
  color: var(--brand-dark);
112
  font-weight: 800;
113
  font-size: 0.8rem;
114
  letter-spacing: 0.1px;
115
  list-style: none;
116
  margin-bottom: 0.5rem;
117
}
118

119
@media screen and (max-width: 640px) {
120
  .mobile-hidden {
121
    display: none;
122
  }
123
  .mobile-display {
124
    display: block;
125
  }
126
}

This CSS will style the error messages with a red text color, bold font weight, and a smaller font size.

Next, let’s add the JavaScript that will add this new class to any areas of the form that have errors.

1
// Capture user's input on form submission
2
let form = document.querySelector("form");
3

4
form.addEventListener("submit", function (event) {
5
  event.preventDefault();
6

51 collapsed lines
7
  const maxHoursPerLevel = {
8
    basic: 5,
9
    advanced: 10,
10
  };
11

12
  // Store the user's email address as userEmail (string/text)
13
  let userEmail = document.querySelector("#email").value;
14
  // Store the user's level as userLevel (string/text)
15
  let userLevel = document.querySelector("#level").value;
16
  // Store the user's hours of study as userHours (number)
17
  let userHours = document.querySelector("#hoursPerWeek").value;
18

19
  // Validate the user's input
20
  let errors = {};
21

22
  // Helper function to add error messages
23
  function addError(field, message) {
24
    if (!errors[field]) {
25
      errors[field] = { messages: [] };
26
    }
27
    errors[field].messages.push(message);
28
  }
29

30
  // Check if the user has provided an email address
31
  if (userEmail === "") {
32
    addError("email", "Please enter your email address.");
33
  }
34

35
  // Check if the user has selected a level
36
  if (userLevel === "") {
37
    addError("level", "Please select a level of study");
38
  }
39

40
  // Check if the user has specified at least one hour of study
41
  if (isNaN(userHours) || userHours < 1) {
42
    addError("hoursPerWeek", "Please enter at least one hour of tuition.");
43
  }
44

45
  // Check if the userLevel exists in the maxHoursPerLevel object
46
  if (!maxHoursPerLevel.hasOwnProperty(userLevel)) {
47
    addError("level", "Invalid level of study selected.");
48
  }
49

50
  // Check if the number of hours requested is within the allowed range
51
  const maxAllowedHours = maxHoursPerLevel[userLevel];
52
  if (userHours > maxAllowedHours) {
53
    addError(
54
      "hoursPerWeek",
55
      `You can only study a maximum of ${maxAllowedHours} hours per week.`
56
    );
57
  }
58

59
  // Add error class to input elements with errors
60
  for (let field in errors) {
61
    let inputElement = document.querySelector(`#${field}`);
62
    let labelElement = document.querySelector(`label[for=${field}]`);
63
    if (inputElement) {
64
      inputElement.classList.add("error-input");
65
    }
66
    if (labelElement) {
67
      labelElement.classList.add("error-label");
68
    }
69

70
    // Populate the error message div with an unordered list of error messages
71
    let errorDiv = document.querySelector(`#${field}-error`);
72
    if (errorDiv) {
73
      errorDiv.classList.add("error-message");
74
      let ul = document.createElement("ul");
75

76
      errors[field].messages.forEach((message) => {
77
        let li = document.createElement("li");
78
        li.textContent = message;
79
        ul.appendChild(li);
80
      });
81

82
      errorDiv.innerHTML = ""; // Clear any existing content
83
      errorDiv.appendChild(ul);
84
    }
85
 }
86

87
  console.log({ userEmail, userLevel, userHours });
88
  console.log({ errors });
89
});
90
// Calculate the total cost
91
// Display the total cost to the user

Understanding the code

We get the div element with an id attribute that matches the field value and add the error-message class to it:

let errorDiv = document.querySelector(`#${field}-error`);
if (errorDiv) {
  errorDiv.classList.add("error-message");
}

We then create an unordered list element and append it to the errorDiv element:
```
let ul = document.createElement("ul");
errorDiv.appendChild(ul);
```

We loop through the error messages in the errors object and create a list item element for each message:

errors[field].messages.forEach((message) => {
  let li = document.createElement("li");
  li.textContent = message;
  ul.appendChild(li);
});

Finally, we clear any existing content in the errorDiv element and append the unordered list element to it:
```
errorDiv.innerHTML = ""; // Clear any existing content
errorDiv.appendChild(ul);
```

With this code in place, the error messages will be displayed to the user as a list underneath the input fields with errors:

Error messages displayed to the user

Finally, we need to return early if there are any messages inside the errors object:

1
// Capture user's input on form submission
2
let form = document.querySelector("form");
3

4
form.addEventListener("submit", function (event) {
5
  event.preventDefault();
6

79 collapsed lines
7
  const maxHoursPerLevel = {
8
    basic: 5,
9
    advanced: 10,
10
  };
11

12
  // Store the user's email address as userEmail (string/text)
13
  let userEmail = document.querySelector("#email").value;
14
  // Store the user's level as userLevel (string/text)
15
  let userLevel = document.querySelector("#level").value;
16
  // Store the user's hours of study as userHours (number)
17
  let userHours = document.querySelector("#hoursPerWeek").value;
18

19
  // Validate the user's input
20
  let errors = {};
21

22
  // Helper function to add error messages
23
  function addError(field, message) {
24
    if (!errors[field]) {
25
      errors[field] = { messages: [] };
26
    }
27
    errors[field].messages.push(message);
28
  }
29

30
  // Check if the user has provided an email address
31
  if (userEmail === "") {
32
    addError("email", "Please enter your email address.");
33
  }
34

35
  // Check if the user has selected a level
36
  if (userLevel === "") {
37
    addError("level", "Please select a level of study");
38
  }
39

40
  // Check if the user has specified at least one hour of study
41
  if (isNaN(userHours) || userHours < 1) {
42
    addError("hoursPerWeek", "Please enter at least one hour of tuition.");
43
  }
44

45
  // Check if the userLevel exists in the maxHoursPerLevel object
46
  if (!maxHoursPerLevel.hasOwnProperty(userLevel)) {
47
    addError("level", "Invalid level of study selected.");
48
  }
49

50
  // Check if the number of hours requested is within the allowed range
51
  const maxAllowedHours = maxHoursPerLevel[userLevel];
52
  if (userHours > maxAllowedHours) {
53
    addError(
54
      "hoursPerWeek",
55
      `You can only study a maximum of ${maxAllowedHours} hours per week.`
56
    );
57
  }
58

59
  // Add error class to input elements with errors
60
  for (let field in errors) {
61
    let inputElement = document.querySelector(`#${field}`);
62
    let labelElement = document.querySelector(`label[for=${field}]`);
63
    if (inputElement) {
64
      inputElement.classList.add("error-input");
65
    }
66
    if (labelElement) {
67
      labelElement.classList.add("error-label");
68
    }
69

70
    // Populate the error message div with an unordered list of error messages
71
    let errorDiv = document.querySelector(`#${field}-error`);
72
    if (errorDiv) {
73
      errorDiv.classList.add("error-message");
74
      let ul = document.createElement("ul");
75

76
      errors[field].messages.forEach((message) => {
77
        let li = document.createElement("li");
78
        li.textContent = message;
79
        ul.appendChild(li);
80
      });
81

82
      errorDiv.innerHTML = ""; // Clear any existing content
83
      errorDiv.appendChild(ul);
84
    }
85
  }
86

87
  // Return early if there are any errors
88
  if (Object.keys(errors).length > 0) {
89
    return;
90
  }
91

92
  console.log({ errors });
93
});
94
// Calculate the total cost
95
// Display the total cost to the user

Test the form and commit changes

Check that the form now displays all errors in one place, and that the input fields are styled correctly.

If everything looks good, commit your changes using Github Desktop, and remember to push them to your Github reponsitory.

Summary

In this guide, we have improved the error handling for the Harmony Music Academy form by:

Collecting all errors into an object
Creating a helper function to add error messages to the object
Using a loop to process each error
Styling input fields with errors
Displaying error messages to the user
Returning early from the function if there are any errors

This has made the user experience more intuitive and user-friendly, as users can now see all the errors they need to correct in one place.

Next steps

In the next step, we will calculate the total cost of the user’s tuition based on the level and number of hours they have selected.

But first, let’s update our assignment to include the changes we have made in this guide.