Show an error message

01 / 03

Silent nothing is confusing

You stopped empty rows, but pressing Add with nothing typed now does… nothing. The person using the app might think it is broken.

Telling them in words that the box is empty is what a proper app does.

02 / 03

Use hidden to show and hide

HTML has a built-in way to keep an element invisible — the hidden attribute. An element with hidden does not appear on screen.

Put <p id="error" hidden></p> in the HTML. When there is an error, set error.hidden = false to reveal it. When the input is fine, set it back to true.

// show the errorerror.textContent = "Type something first"error.hidden = false// hide the errorerror.hidden = true

03 / 03

Clear the error on good input

After you show the error, if the user types something valid and submits, the error should go away.

So when the guard passes (there is real text), hide the error. Always think about showing and hiding together.