fix(curriculum): clarify validateForm keys for conditional descriptio… (#67033)

curriculum/challenges/english/blocks/lab-customer-complaint-form/67279fe50237291f80eed8b8.md

@@ -24,7 +24,7 @@ For this lab, you have been provided with all the HTML and CSS. You will use Jav
     - `#complaint-description` contains at least twenty characters if the `Other` checkbox is checked.
     - a radio button from `#solutions-group` is selected.
     - `#solution-description` contains at least twenty characters if the `Other` radio button is selected.
-1. You should have a function named `validateForm` that returns an object containing the following keys: `full-name`, `email`, `order-no`, `product-code`, `quantity`, `complaints-group`, `complaint-description`, `solutions-group`, and `solution-description`. The value of each key should be `true` if the corresponding form field is correctly filled and `false` otherwise.
+1. You should have a function named `validateForm` that returns an object containing the following keys: `full-name`, `email`, `order-no`, `product-code`, `quantity`, `complaints-group`, `complaint-description`, `solutions-group`, and `solution-description`. The value of each key should be `true` if the corresponding form field is correctly filled and `false` otherwise. The conditional description fields should be `true` when they are not required, and otherwise validated based on whether they contain at least twenty characters.
 1. You should have a function named `isValid` that takes the object returned by `validateForm` as argument and returns `true` if every form field is correctly filled and `false` otherwise.
 1. If a change event is triggered on a form field and it has a valid value, you should set its border color to `green`. In case of checkbox and radio button groups, you should set the border color of the parent `fieldset`.
 1. If a change event is triggered on a form field and it has an invalid value, you should set its border color to `red`. In case of checkbox and radio button groups, you should set the border color of the parent `fieldset`.
@@ -198,6 +198,13 @@ const fieldset = document.getElementById("complaints-group");
 assert.equal(fieldset.style.borderColor, "red");
 ```
 
+When `#other-complaint` is not checked, `validateForm()["complaint-description"]` should be `true`.
+
+```js
+document.getElementById("other-complaint").checked = false;
+assert.isTrue(validateForm()["complaint-description"]);
+```
+
 When `#other-complaint` is checked and `#complaint-description` contains at least twenty characters, `validateForm()["complaint-description"]` should be `true`.
 
 ```js
@@ -276,6 +283,13 @@ const fieldset = document.getElementById("solutions-group");
 assert.equal(fieldset.style.borderColor, "red");
 ```
 
+When `#other-solution` is not checked, `validateForm()["solution-description"]` should be `true`.
+
+```js
+document.getElementById("other-solution").checked = false;
+assert.isTrue(validateForm()["solution-description"]);
+```
+
 When `#other-solution` is checked and `#solution-description` contains at least twenty characters, `validateForm()["solution-description"]` should be `true`.
 
 ```js
@@ -799,9 +813,9 @@ const validateForm = () => {
         "product-code": /[A-Z]{2}\d{2}-[A-Z]\d{3}-[A-Z]{2}\d/i.test(productCode.value.trim()),
         "quantity": Number(quantity.value.trim()) > 0,
         "complaints-group": complaintsArr.some(i => i),
-        "complaint-description": null,
+        "complaint-description": true,
         "solutions-group": solutionsArr.some(i => i),
-        "solution-description": null
+        "solution-description": true
     }
 
     if (complaintsArr[3]) {
@@ -826,8 +840,6 @@ const validateForm = () => {
     } else {
         solutionTextAreaDiv.style.display = "none";
     }
-    if (validationObject["complaint-description"] === null) delete validationObject["complaint-description"];
-    if (validationObject["solution-description"] === null) delete validationObject["solution-description"];
 
     return validationObject;
 }