Validate inputs

/*
    I - Se não preencher nada e CLICAR no botão, a caixa fica vermelho E aparece mensagem 'campo obrigatório';
    II - Se preencher tudo, o border fica verde;

*/

const botao = document.querySelector('.btn')
const form = document.getElementById('form')

botao.addEventListener('click', function (event) {
    event.preventDefault()
    
    Array.from(form.elements).forEach(element => {
        if(element.value !== '') {
            element.classList.add('mostrar-sucesso')
            return;
        }
        mostrarMensagemDeError(element)
      });
})

function mostrarMensagemDeError(element){
   const divErroId =  `${element.id}-erro`
   const divErro = document.getElementById(divErroId);
   divErro.classList.add('mostrar-erro');
}