From ed8c673dbbfe84fb740b5bd5fd4154c7f6322ac6 Mon Sep 17 00:00:00 2001 From: Aastha Mittal <88279269+aastha-mittal@users.noreply.github.com> Date: Fri, 24 Apr 2026 04:00:15 -0400 Subject: [PATCH] =?UTF-8?q?fix(curriculum):=20clarify=20validateForm=20key?= =?UTF-8?q?s=20for=20conditional=20descriptio=E2=80=A6=20(#67033)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../67279fe50237291f80eed8b8.md | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/curriculum/challenges/english/blocks/lab-customer-complaint-form/67279fe50237291f80eed8b8.md b/curriculum/challenges/english/blocks/lab-customer-complaint-form/67279fe50237291f80eed8b8.md index eeedb24d2b2..e86bdf151bf 100644 --- a/curriculum/challenges/english/blocks/lab-customer-complaint-form/67279fe50237291f80eed8b8.md +++ b/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; }