2
respostas

Aula 6 - Validação de formulários

Boa noite pessoal, No meu código está aparecendo peso inválido no console, mas o span não está aparecendo. Podem me ajudar?

// arquivo form.js

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event){
    event.preventDefault();

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

    // Extraindo informações do paciente do form
    var paciente = obtemPacienteDoFormulario(form);

    var pacienteTr = montaTr(paciente);

    var erro = validaPaciente(paciente);


    if(erro.length > 0){
     var mensagemErro = document.querySelector("#mensagem-erro");
     mensagemErro.textContent = erro;  
     return;
    }


   // Adicionando o pacienteTr (linha) na tabela
    var tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(pacienteTr);

    form.reset();
});

function obtemPacienteDoFormulario(form){
    var paciente = {
        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");

        var nomeTd = montaTd(paciente.nome,"info-nome");
        var pesoTd = montaTd(paciente.peso, "info-peso");
        var alturaTd = montaTd(paciente.altura,"info-altura");
        var gorduraTd = montaTd(paciente.gordura,"info-gordura");
        var imcTd = montaTd(paciente.imc, "info-imc");


        pacienteTr.appendChild(montaTd(paciente.nome,"info-nome")); //nessa linha ao inves de criar variável eu coloquei a chamada da funcao monta td
        pacienteTr.appendChild(pesoTd);
        pacienteTr.appendChild(alturaTd);
        pacienteTr.appendChild(gorduraTd);
        pacienteTr.appendChild(imcTd);

        console.log(pacienteTr);

    return pacienteTr;
}

function montaTd(dado, classe){
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);

    return td;
}

function validaPaciente(paciente){
    if(validaPeso(paciente.peso = true)){
        return "";
    }else{
        return "O peso é inválido";
    }
}
// arquivo calcula-imc.js

        var pesoEhvalido = true;
        var alturaEhValida = true;

        function validaPeso(peso){
            if(peso >= 0 && peso <= 1000) {
                return true;
            } else {
                return false;
            }
        }

        function validaAltura(altura){
            if(altura >= 0 && altura < 3.00){
                return true;
            }else {
                return false;
            }
        }
2 respostas

O SPAN está invisível e não aparece? Ou somente a mensagem de erro não aparece dentro do SPAN?

No bloco abaixo não há uma instrução para torná-lo visível.

if(erro.length > 0){
     var mensagemErro = document.querySelector("#mensagem-erro");
     mensagemErro.textContent = erro;  
     return;
    }

Exatamente, não aparece a mensagem de erro quando coloco um valor inválido para o peso.