codex-lv2-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

Current Level: 28

29

30

31

32

---

---

🧪 Level 28: Show Validation on Empty

What You’ll Do

Add validation logic for empty input.

Instructions

In the button click handler, if the input is empty/whitespace:

• Show a clear validation message in the validation area
• Style it as an error (e.g., red/warning style via classes)
• Do not call the model function in this case

💡 Code Hints

Adding validation logic? You’ll need to check if input is empty and show error messages. Check out the Conditional Logic section in SNIPPETS.md for validation examples and the Helper Functions section for styling functions.

✅ Check

1. Open your webpage in a browser
2. Make sure the input field is empty
3. Click your Send button
4. You should see a validation message appear in the validation area (like “Please enter a message”)
5. The message should be styled as an error (red text or warning colors)
6. Open Chrome DevTools (F12) and check the Console tab - you should NOT see any API calls
7. If you see an API call or no validation message, check that your empty input condition is working correctly

---

Next: Level 29 - Clear Validation on Valid Input

---

---

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

Current Level: 28

29

30

31

32