Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Validando o restante dos campos

Oi pessoal, tudo bem?

Então, no meu caso, a situação é a seguinte:

Se eu apertar o botão 'enviar' sem preencher nenhum campo do forms aparece todas as mensagens de erro referente aos campos do formulário, porém, quando eu preencho todos os campos corretamente e aperto pra enviar, ainda assim fica aparecendo uma mensagem de erro, normalmente a do ultimo campo preenchido!

Agora se eu preencher de vez tudo corretamente, não fica nenhuma mensagem de erro.

Pode me ajudar?

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function (event) {
  // console.log("oi cliquei no botao");
  event.preventDefault();

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

  //extraindo informacoes do paciente do form
  var paciente = obtemPacienteDoFormulario(form);

  //cria a tr e a td do paciente

  var pacienteTr = montaTr(paciente);

  var erros = validaPaciente(paciente);
  console.log(erros);

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

  // adicionando o paciente na tabela
  var tabela = document.querySelector("#tabela-pacientes");

  tabela.appendChild(pacienteTr);

  form.reset();
  var mensagensErro = documenent.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 = {
    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 campo NOME não pode ser em branco!");
  }

  if(paciente.peso.length == 0){
    erros.push("O campo PESO não pode ser em branco!");
  }

  if(paciente.altura.length == 0){
    erros.push("O campo ALTURA não pode ser em branco!");
  }

  if(paciente.gordura.length == 0){
    erros.push("O campo GORDURA não pode ser em branco!");
  }

  if(!validaPeso(paciente.peso)){
    erros.push("Peso é inválido!")
  }
  if(!validaAltura(paciente.altura)){
    erros.push("Altura é inválida!")
  }
  return erros;
}
2 respostas
solução!

Oi Liliane!

Tem um erro de digitação na palavra document que está impedindo de apagar as mensagens de erro:

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

Foi isso mesmo, obrigada!