CHAPTER 2 · 3 lessons · 3 exercises
Validate the input
Block empty submissions and show errors in words and style.
0 / 3 solved
The app works now. But it has no defence against bad input. Press Add with nothing typed and a blank row appears.
Stopping that is called input validation, and this chapter adds three checks and feedback steps before accepting input.
- Check whether it is empty and stop if it is (a guard)
- Tell the user what went wrong in words (an error message)
- Show it visually too (a red border)
This chapter adds all three using trim, return, hidden and classList. Each one is a single-line move, but together they make a proper form.
Lessons in this chapter
Block the empty
- 06Block empty inputPressing Add with nothing typed creates a blank row. Stop that with trim and return.Go to the exercises
Show the error
- 07Show an error messageSubmitting empty should say "Type something first". Use hidden to show and hide the message.Go to the exercises
- 08Switch to an error lookTurn the text box red when empty. Use classList.add to put a class on and classList.remove to take it off.Go to the exercises