diff --git a/curriculum/challenges/english/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md b/curriculum/challenges/english/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md index 27a5956dcef..c44a86312fe 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md +++ b/curriculum/challenges/english/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md @@ -20,6 +20,7 @@ demoType: onClick 1. You should have a `fieldset` element with class of `radio-group`. 1. Inside `.radio-group` you should have a set of `input` elements with the type `radio` and relevant labels for selecting availability options (e.g., Full-Time, Part-Time). The group `name` should be `availability`. 1. You should have a `textarea` element with the id `message` for entering a message. +1. You should associate every `input` element with a `label` element. 1. You should have a `button` element with the type `submit` for submitting the form. 1. Add a `:focus` pseudo-class to the `input` and `textarea` elements to change their border color when focused. 1. The `input`, `select` and `textarea` elements should have an `:invalid` pseudo-class that changes the border color to red when invalid input is detected. @@ -83,6 +84,18 @@ You should have a `textarea` element with the id `message` for entering a messag assert.isNotEmpty(document.querySelectorAll("div.container > form textarea#message")); ``` +You should associate every `input` element with a `label` element. + +```js +const els = document.querySelectorAll('input'); +assert.isNotEmpty(els); +els.forEach(input => { + const label = document.querySelector(`label[for="${input.id}"]`) || input.parentElement; + assert.exists(label); + assert.equal(label.tagName, "LABEL"); +}) +``` + You should have a `button` element with the type `submit` for submitting the form. ```js