Intro component with sign-up form with JS validation

I would like to have some feedback about JS and the error status. I have set the error message under each input field in a p element with the hidden class being removed via JS when the field is empty.

I have seen other solutions that add the error message via JS, I wondered if there was a recommended method or if both approaches are acceptable.

Furthermore, is the event handler's logic correct or are there more straightforward methods?