Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Todas as mensagens de Erro aparecem ao enviar formulário

Boa noite galera,

Estou tendo uma dúvida. Ao realizar o envio do formulário em branco, todas as mensagens de erro estão sendo impressas na tela inclusive "O peso é inválido" e "O altura é inválido", quando deveriam ser impressas apenas as "... não pode ser em branco". Alguém poderia me orientar na correção deste problema? Segue o código do meu "form.js".

var adicionarPaciente = document.querySelector("#adicionar-paciente");

adicionarPaciente.addEventListener("click", function(event){

    event.preventDefault();

    var form = document.querySelector("#form-adiciona");

    var paciente = obtemPacienteDoFormulario(form);

    var pacienteTr = montaTr(paciente);

    var erros = validaPaciente(paciente);

    if(erros.length > 0){
        exibeMensagensDeErro(erros);
        return;
    }

    var tabela = document.querySelector("#tabela-pacientes");

    tabela.appendChild(pacienteTr);

    form.reset();

    var mensagens   Erro = document.querySelector("#mensagens-erro");
    mensagensErro.innerHTML= "";

});

function exibeMensagensDeErro (erros){

    var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";

    erros.forEach(function(erro) {
        var li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);
    });
}

function obtemPacienteDoFormulario (form){

    var paciente = {            // criando um objeto (descriminar as carateristicas do objeto.  
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        imc: calculaImc(form.peso.value, form.altura.value)
    }

    return paciente;
}

function montaTr(paciente) {

    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));

    return pacienteTr;  
}

function montaTd(dado,classe){

    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);


    return td;
}

function validaPaciente (paciente){

    var erros = [];

    if (paciente.nome.length == 0){
        erros.push("O nome não pode ser em branco");
    }
    if (paciente.peso.length == 0){
        erros.push("O peso não pode ser em branco");
    }
    if (paciente.altura.length == 0){
        erros.push("O altura não pode ser em branco");
    }
    if (paciente.gordura.length == 0){
        erros.push("O gordura não pode ser em branco");
    }
    if (!validaPeso(paciente.peso)){
        erros.push("O peso é inválido");
    }
    if (!validaAltura(paciente.altura)){
        erros.push("O altura é inválido");
    }
    return erros;

}
1 resposta
solução!

Oi André, tudo bem? Uma forma simples é juntar essas validações de um mesmo atributo em um if/else só. Testa assim:

if (paciente.peso.length == 0){
        erros.push("O peso não pode ser em branco");
 } else if(!validaPeso(paciente.peso)) {
    erros.push("O peso é inválido");
}

Outra solução é encapsular essa validação do peso dentro da função validaPeso. Essa segunda alternativa me parece ser melhor. Como você não postou essa função aqui, fiquei meio sem saber como te guiar nessa alternativa.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software