Intro component with sign-up form (SASS, Javascript, BEM)

This proved to be a fun little challenge that helped me work on my Javascript skills and learn a few new things.

Even so, I can't say that I am satisfied with my code. I had to make an eventListener for each input field and I was wondering if there was a way to simply have one eventListener that identifies each input field separately and sends the specific data needed to modify things. I feel like it could be smaller with only one reusable function but I'm having a hard time getting an idea on how to do that.

Any suggestions?

Also, when I first started I planned to make custom functions to identify the empty input fields andinvalid email but I discovered that the input element already had it's own default messages and identifiers. So I simply disabled the messages while it still identified invalid inputs and made it react to my own custom message function.

My question to you all is: should I have made a custom function to identify if the field was empty or if the email format was wrong or is it better to use the default ones in this case and simply modify the message?

What would be the best practice in such a situation?

Thank you all in advance and as usual, feedback and advices are always welcome! ^^