Impedimento de criação de Pacientes em Branco

Oi Guilherme, tudo certo?

Você precisa que o campo seja de preenchimento obrigatório. Antigamente havia a necessidade de se fazer essa validação na "raça', com JS.

Com o HTML5 surgiram atributos novos, e um deles resolve facilmente seu problema, o required.

Basta colocá-lo no elemento e ele passará a ser obrigatório.

Espero ter ajudado,

Abcs!

Tentei utilizar o atributo required, porém não funcionou, continuo conseguindo inserir novos pacientes com cmapos em branco.

<form>
                    <fieldset>
                        <label for="nome">Nome:</label>
                        <input id="campo-nome" required="required" type="text" placeholder="digite o nome do seu paciente">
                    </fieldset>
                    <fieldset class="campo-medio">
                        <label for="peso">Peso:</label>
                        <input id="campo-peso" required="required" type="text" placeholder="digite o peso do seu paciente">
                    </fieldset>
                    <fieldset class="campo-medio">
                        <label for="altura">Altura:</label>
                        <input id="campo-altura" required="required" type="text" placeholder="digite a altura do seu paciente">
                    </fieldset>
                    <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
                </form>

Oi Guilherme,

O required não funcionou por causa do `event.preventDefault(). Acabei não vendo essa linha no seu código.

Como você fez a verificação?

Fiz aqui usando seu código, usando um IF verificando o valor de cada um dos campos, se qualquer um deles for vazio (que é mesmo de ""), ele dá um alerta nada simpático na cara do usuário.

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

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

    event.preventDefault(); 

    var campoNome = document.querySelector("#campo-nome");
    var campoPeso = document.querySelector("#campo-peso");
    var campoAltura = document.querySelector("#campo-altura");

    var pacienteNovo = "<tr class='paciente'>"+
                        "<td class='info-nome'>" + campoNome.value + "</td>"+
                        "<td class='info-peso'>"+ campoPeso.value + "</td>"+
                        "<td class='info-altura'>" + campoAltura.value + "</td>"+
                        "<td class='info-imc'></td>"+
                    "</tr>";    
    var tabela = document.querySelector("table");    

    if(campoNome.value == "" || campoPeso.value == "" || campoAltura.value == "") {
       alert('Por favor, preencha todos os campos')
    } else {
        tabela.innerHTML = tabela.innerHTML + pacienteNovo;
        campoNome.value = "";
        campoPeso.value = "";
        campoAltura = "";
    }

});

Espero ter ajudado,

Abcs!

Entendi, funcionou. Porém estava querem colocar uma pattern no preenchimento. Por exemplo no campo do peso, aceitar somente números.

Com o event.preventDefault(); isso é inviável né?

Maravilha!

Não esqueça de colocar de marcar minha resposta como solução para dar o tópico como solucionado, ok?

Com relação a sua outra dúvida, se você colocar o type do input como number, em vez de text, deve resolver.

Abcs!

Boa tarde pessoal, Gostaria de compartilhar o meu código com vocês sobre este assunto.

Tenho um span class="alerta" logo ao lado do botão Adicionar que tem o display:none;

Meu script js:

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

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

    var campoNome = document.querySelector("#campo-nome");
    var campoPeso = document.querySelector("#campo-peso");
    var campoAltura = document.querySelector("#campo-altura");

    var novoPaciente = "<tr class='paciente'>"+
                            "<td class='info-nome'>"+ campoNome.value +"</td>"+
                            "<td class='info-peso'>"+ campoPeso.value +"</td>"+
                            "<td class='info-altura'>"+ campoAltura.value +"</td>"+
                            "<td class='info-imc'>"+campoPeso.value/(campoAltura.value*campoAltura.value)+"</td>"+ 
                       "<tr>";
    var tabela = document.querySelector("#tabela-pacientes");
    var alerta = document.querySelector(".alerta");

    if(campoNome.value != "" && campoAltura.value != "" && campoPeso.value != ""){
        tabela.innerHTML += novoPaciente;
        alerta.style.display = "none";
        campoNome.value = "";
        campoPeso.value = "";
        campoAltura.value = "";    
}
    else{
        alerta.style.display = "inline-block";
    }
});

Muito show!!! Faltou esse detalhe a ser comentado na aula. =)