Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Validação

Referente ao curso JavaScript : Programando na linguagem da web, no capítulo Conhecendo o querySelector e adicionando novos pacientes e atividade O Projeto do curso

por Carlos Evangelista Reis
| 335.2k xp | 203 posts

Boa noite. Estou tentando fazer uma pequena validação, porém quando dá um erro de validação (campo vazio), não consigo mais adicionar um paciente na tabela mesmo inserindo os dados.

Github: https://github.com/CarlosEReis/Calculando-IMC---Javascript

var botao = document.querySelector('#adicionar-paciente');
var tabela = document.querySelector("table");

function addWarning(campo){
  campo.focus();
  campo.setAttribute("id", "warning");
  campo.setAttribute("class","wplaceh");
  campo.value="";
}

botao.addEventListener("click", function(event){
  event.preventDefault();

  var nome    = document.querySelector('#campo-nome');
  var peso    = document.querySelector('#campo-peso');
  var altura  = document.querySelector('#campo-altura');


  if(nome.value == "")
    addWarning(nome);
  if(peso.value == "")
    addWarning(peso);
  if(altura.value == "")
    addWarning(altura);

  if(nome.value != "" && peso != "" && altura != ""){
    var novoPaciente = "<tr class='paciente'>"+
                        "<td class='info-nome'>"+nome.value+"</td>"+
                        "<td class='info-peso' id='peso-2'>"+peso.value+"</td>"+
                        "<td class='info-altura' id='altura-2'>"+altura.value+"</td>"+
                        "<td class='info-imc' id='imc-2'></td>"+
                        "</tr>";

    tabela.innerHTML += novoPaciente;

    nome.value = "";
    peso.value = "";
    altura.value = "";
  }

})
2 respostas
solução!
por Daniel Omnion
| 1014.4k xp | 1150 posts

O problema está na função addWarning(campo), quando ocorre um erro, você troca o id do campo para warning. Por isso que ao tentar de novo ocorre erro.

Uma forma de resolver é editar o seu arquivo css, e transformar o estilo #warning num seletor de classe .warning. Depois, alterar a função desta forma

function addWarning(campo){
  campo.focus();
   campo.setAttribute("class","wplaceh warning");
  campo.value="";
}

Uma melhoria seria, no caso de erro e posterior correção, apagar o estilo warning ao gravar, logo depois de limpar o formulário. (evento click do botão Adicionar). Você pode criar um estilo de apagar (exemplo)

.limpar{
 border: 0px;
 background-color: #ffffff;

}

E depois aplicar nos campos 

nome.value = "";
  peso.value = "";
 altura.value = "";
nome.setAttribute("class","limpar");
peso.setAttribute("class","limpar");
altura.setAttribute("class","limpar");
por Carlos Evangelista Reis
| 335.2k xp | 203 posts

Boa Daniel! Obrigado.