Uma forma diferente

Oi Felipe, me mostra como você está usando essa função e também o seu HTML pra gente poder ver e testar por favor?

HTML:

<section class="container adicionar-paciente">
        <h2 id="titulo-form">Adicionar novo paciente</h2>
        <form id="form-adiciona">
            <div class="grupo">
                <label for="nome">Nome:</label><span id="formNome"></span>
                <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
            </div>
            <div class="grupo">
                <label for="peso">Peso:</label><span id="formPeso"></span>
                <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="altura">Altura:</label><span id="formAltura"></span>
                <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="gordura">% de Gordura:</label><span id="formGordura"></span>
                <input id="gordura" name="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
            </div>

            <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
        </form>
    </section>

JS:

function validaPaciente(paciente) {
    var erros = [];
        if (paciente.nome.length = 0) {
            erros.push('O campo Nome deve ser preenchido.')
        }
        if (paciente.gordura.length = 0) {
            erros.push('O campo Gordura deve ser preenchido.')
        }
        if (paciente.peso.length = 0) {
            erros.push('O campo Peso deve ser preenchido.')
        }
        if (paciente.altura.length = 0) {
            erros.push('O campo Altura deve ser preenchido.')
        }
        if (!validaPeso(paciente.peso)) {
            erros.push("Peso inválido");
        }
        if (!validaAltura(paciente.altura)) {
            erros.push("Altura inválida");
        }
        return erros;
}

function exibeMsgErro(erros) {
    var spanNome = document.querySelector('#formNome');
    var spanPeso = document.querySelector('#formPeso');
    var spanAltura = document.querySelector('#formAltura');
    var spanGordura = document.querySelector('#formGordura');
    erros.forEach(function(erro) {
        spanNome.textContent = erro;
    });
}
var botaoAdicionar = document.querySelector('#adicionar-paciente');
botaoAdicionar.addEventListener('click', function(event) {
    event.preventDefault();
    var form = document.querySelector('#form-adiciona');
    var paciente = obtemPacienteDoFormulario(form);
    var tabela_pacientes = document.querySelector('#tabela-pacientes');
    var erros = validaPaciente(paciente);
    if (erros.length > 0) {
        console.log(exibeMsgErro(erros));
            exibeMsgErro(erros);
            return;
    }
    else {
    adicionaTr(paciente, 'paciente', tabela_pacientes);
    form.reset();
}
});

Felipe, pelo que entendi, as mensagens estão até sendo exibidas, mas estão indo todas misturadas para todos os campos. É isso mesmo?

Se for, a solução é um pouquinho mais complicadinha do que seu código. Primeiro, precisamos informar para qual campo temos erro ao adicionar as mensagens de erro no array. Isso pode ser feito com objetos:

 if (paciente.nome.length = 0) {
            erros.push({'campo':'nome', 'mensagem': 'O campo Nome deve ser preenchido.'});
}

Note que o Array agora terá vários objetos com dois atributos, o campo e a mensagem de erro. Note que estou usando como identificador do campo, o mesmo nome do campo no formulário, só pra facilitar um pouco.

Eu trocaria o ID dos spans por classes que seguissem um padrão. Tipo, nome do campo + 'erro'. O exemplo para o campo nome seria:

<div class="grupo">
    <label for="nome">Nome:</label>
    <span class="nome-erro"></span>
    <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
</div>

Certo, com isso em mãos, falta construir a lógica que exibe as mensagens. Vamos percorrer todos os itens do array, mas ai agora temos um truque. Na hora da seleção do elemento para exibir a mensagem de erro, vamos concatenar o campo que vem no objeto dentro do array, com o sufixo 'erro' que adicionamos nas classes dos spans.

Olha só:

function exibeMsgErro(erros) {
    erros.forEach(function(erro) {
        var spanErro = document.querySelector(erro.campo + '-erro');
        spanErro.textContent = erro.mensagem;
    });
}

Com esse truque o código ficou até mais curtinho. Testa pra gente?

Bom dia! Entendi a sua lógica, mas ao testar o código , a variável spanErro está me retornando um valor nulo.. Não sei porque...

Erro:

Uncaught TypeError: Cannot set property 'textContent' of null
    at principal.js:126
    at Array.forEach (<anonymous>)
    at exibeMsgErro (principal.js:123)
    at HTMLButtonElement.<anonymous> (principal.js:138)

Imprimi o array no console e está vindo certinho.. A função de exibir mensagem que não funciona.

Segue HTML:

<section class="container adicionar-paciente">
        <h2 id="titulo-form">Adicionar novo paciente</h2>
        <form id="form-adiciona">
            <div class="grupo">
                <label for="nome">Nome:</label>
                            <span class="nome-erro"></span>
                <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
            </div>
            <div class="grupo">
                <label for="peso">Peso:</label>
                            <span class="peso-erro"></span>
                <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="altura">Altura:</label>
                            <span class="altura-erro"></span>
                <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="gordura">% de Gordura:</label>
                            <span class="gordura-erro"></span>
                <input id="gordura" name="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
            </div>

            <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
        </form>
    </section>

Segue JS:

function validaPaciente(paciente) {
    var erros = [];
        if (paciente.nome.length == 0) {
            erros.push({'campo':'nome', 'mensagem': 'O campo Nome deve ser preenchido.'});
        }
        if (paciente.gordura.length == 0) {
            erros.push({'campo':'gordura', 'mensagem': 'O campo Gordura deve ser preenchido.'});
        }
        if (paciente.peso.length == 0) {
            erros.push({'campo':'peso', 'mensagem': 'O campo Peso deve ser preenchido.'});
        }

        else {
                if (!validaPeso(paciente.peso)) {
                    erros.push({'campo':'peso', 'mensagem': 'Peso inválido.'});
                }
        }

        if (paciente.altura.length == 0) {
            erros.push({'campo':'altura', 'mensagem': 'O campo Altura deve ser preenchido.'});
        }

        else {
            if (!validaAltura(paciente.altura)) {
                erros.push({'campo':'altura', 'mensagem': 'Altura inválida.'});
            }
        }
        return erros;
}

function exibeMsgErro(erros) {
    erros.forEach(function(erro) {
        var spanErro = document.querySelector(erro.campo + '-erro');
                console.log(erro.campo);
        spanErro.textContent = erro.mensagem;
    });
}
var botaoAdicionar = document.querySelector('#adicionar-paciente');
botaoAdicionar.addEventListener('click', function(event) {
    event.preventDefault();
    var form = document.querySelector('#form-adiciona');
    var paciente = obtemPacienteDoFormulario(form);
    var tabela_pacientes = document.querySelector('#tabela-pacientes');
    var erros = validaPaciente(paciente);
    console.log(erros);
    if (erros.length > 0) {
            exibeMsgErro(erros);
            return;
    }
    else {
    adicionaTr(paciente, 'paciente', tabela_pacientes);
    form.reset();
}
});

Opa Felipe, desculpa a falta de atenção minha. Tá dando erro por que esquecemos de colocar o ponto para selecionar a classe corretamente.

document.querySelector('.' + erro.campo + '-erro');

Para selecionar classes, o querySelector precisa que o seletor inicie com ponto.

Noss.. Tbm não prestei atenção no seletor de classe.. rsrsrs..

Agora está funcionando perfeitamente. Obrigado!