Desenvolvedor de Software e Especialista em Tecnologia da Informação

Validação de Número com DOM em JavaScript (Projeto)

Digite "Rogério" e o sistema recusa. Digite "123" e o sistema recusa de novo. Só quando você digita um número entre 0 e 9 é que aparece a mensagem de sucesso. Neste artigo você constrói, do zero, esse pequeno projeto de validação usando manipulação de DOM em JavaScript puro. Uma habilidade essencial para qualquer programador que quer criar formulários interativos .

POV: Você validou um número e só aceitou de 0 a 9 😎🎯

Começamos conectando um evento de clique aos botões "Novo" e "Limpar", e criando a função que limpa a lista de erros usando innerHTML. Depois implementamos a str função principal: capturar a entrada do usuário com str prompt(), verificar se ele realmente digitou algo, e criar dinamicamente um elemento de lista (li) usando createElement() para exibir mensagens na tela.

Manipulação de DOM Validação de Formulário createElement innerHTML JavaScript NaN JavaScript para Iniciantes Projeto JavaScript RogerioPontesTI

"Nós vamos trabalhar aqui nos botões. Vou adicionar um evento ao botão, um clique e vou chamar de novo. E da mesma forma vou também criar uma função limpar para que o usuário venha limpar tudo que estiver aqui nessa lista de erros. É assim que se constrói um formulário interativo."

📋 Visão geral do projeto

O projeto que vamos construir é um validador de números que:

  • Recebe a entrada do usuário via prompt()
  • Valida se a entrada é um número válido
  • Verifica se o número está entre 0 e 9
  • Exibe mensagens de erro ou sucesso na tela
  • Permite limpar todas as mensagens com um botão
🎯 Tecnologias utilizadas
  • HTML — estrutura da página
  • JavaScript — lógica e manipulação do DOM
  • CSS — estilização básica
  • DOM Manipulation — criação e modificação de elementos

📄 Estrutura HTML

HTML 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Validador de Números</title>
    <script src="./main.js" defer></script>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <h1>Validador de Números</h1>
        <p>Digite um número entre 0 e 9</p>
        <div class="botoes">
            <button id="btnNovo">Novo</button>
            <button id="btnLimpar">Limpar</button>
        </div>
        <div class="resultado">
            <ul id="listaErros"></ul>
        </div>
    </div>
</body>
</html>

⚙️ JavaScript — A lógica do projeto

1. Capturando elementos do DOM

CAPTURANDO ELEMENTOS 

// Capturando elementos do DOM
const btnNovo = document.getElementById("btnNovo");
const btnLimpar = document.getElementById("btnLimpar");
const listaErros = document.getElementById("listaErros");

2. Função limpar — removendo mensagens

FUNÇÃO LIMPAR 

function limpar() {
    listaErros.innerHTML = "";
}

3. Função novo — validando a entrada

FUNÇÃO NOVO 

function novo() {
    // 1. Capturar entrada
    const entrada = prompt("Digite um número entre 0 e 9:");

    // 2. Verificar se o usuário cancelou
    if (entrada === null) {
        return;
    }

    // 3. Criar elemento li dinamicamente
    const li = document.createElement("li");

    // 4. Tentar converter para número
    const input = Number(entrada);

    // 5. Validar se é um número
    if (isNaN(input)) {
        li.textContent = "Erro: " + entrada + " não é um número!";
        li.style.color = "red";
    }
    // 6. Validar se está entre 0 e 9
    else if (input < 0 || input > 9) {
        li.textContent = "Erro: " + entrada + " não está entre 0 e 9!";
        li.style.color = "orange";
    }
    // 7. Sucesso!
    else {
        li.textContent = "Parabéns! Você digitou " + entrada + "!";
        li.style.color = "green";
    }

    // 8. Adicionar à lista
    listaErros.appendChild(li);
}

4. Adicionando eventos aos botões

EVENTOS 

// Adicionando eventos de clique
btnNovo.addEventListener("click", novo);
btnLimpar.addEventListener("click", limpar);

📖 Explicando o código passo a passo

1️⃣ prompt() — capturando a entrada

A função prompt() exibe uma caixa de diálogo e retorna o que o usuário digitou como string .

Se o usuário cancelar, retorna null .

2️⃣ Number() — convertendo para número

Converte a string em número . Se não for possível, retorna NaN .

Exemplo: Number("10") = 10, Number("texto") = NaN .

3️⃣ isNaN() — verificando se é número

A função isNaN() verifica se um valor é NaN .

Se for NaN, significa que não é um número válido .

4️⃣ createElement() — criando elementos dinâmicos

Cria um novo elemento HTML para ser inserido no DOM .

Exemplo: document.createElement("li") cria um item de lista .

5️⃣ style.color — alterando a cor dinamicamente

A propriedade style.color permite mudar a cor do texto de um elemento .

Use "red" para erro, "green" para sucesso .

6️⃣ appendChild() — adicionando à lista

Adiciona um elemento como filho de outro no DOM .

Exemplo: listaErros.appendChild(li) insere o item na lista .

🖥️ Exemplo de saída no console e na tela

SAÍDA
console — validação
❌ Erro: Rogério não é um número! ❌ Erro: 123 não está entre 0 e 9! ✅ Parabéns! Você digitou 5!

⏱️ Capítulos do vídeo

  • 00:00 — Demonstração: validação de número e mensagens de erro
  • 00:17 — Eventos de clique (onclick) nos botões Novo e Limpar
  • 00:40 — Função limpar em JavaScript: usando innerHTML
  • 01:10 — Função novo: capturando dados com prompt()
  • 01:52 — Manipulando o DOM: criando elementos li com createElement
  • 02:10 — Validando se a entrada é um número (NaN)
  • 02:23 — Feedback visual: mudando o texto e a cor (style.color)
  • 03:00 — Validando o intervalo entre 0 e 9
  • 03:29 — Mensagem de sucesso em verde quando o número está certo
  • 03:43 — Encerramento e convite para se inscrever

🎯 Conclusão

Este projeto de validação é um excelente exercício para consolidar conceitos fundamentais de JavaScript e manipulação do DOM . Ele mostra como capturar entradas, validar dados, criar elementos dinâmicos e fornecer feedback visual ao usuário .

Neste artigo, você aprendeu:

  • ✅ Como adicionar eventos de clique aos botões
  • ✅ Como criar uma função para limpar uma lista usando innerHTML
  • ✅ Como capturar dados do usuário com prompt()
  • ✅ Como criar elementos HTML dinamicamente com createElement()
  • ✅ Como validar se uma entrada é um número usando NaN
  • ✅ Como validar se um número está dentro de um intervalo
  • ✅ Como alterar a cor de um texto dinamicamente com style.color
  • ✅ Como exibir mensagens de erro e sucesso na tela

💡 Lembre-se: Este projeto é um ótimo exercício para juntar tudo que você aprende sobre condicionais, manipulação de DOM e interação com o usuário em um exemplo real e visual .

🤔 O que você achou?

💬 Quer aprender JavaScript do ZERO? Comece agora a escrever seu primeiro código e seus fundamentos!

❓ FAQ: Perguntas Frequentes sobre Validação com DOM em JavaScript

É a capacidade de alterar elementos HTML dinamicamente usando código JavaScript, como criar, modificar ou remover elementos da página .

Cria um novo elemento HTML dinamicamente, direto pelo JavaScript, sem precisar escrever no HTML original .

Permite ler ou alterar o conteúdo HTML dentro de um elemento, sendo útil para limpar ou preencher listas .

Usando isNaN() ou Number() e verificando se o resultado é NaN, que identifica quando o valor não é um número válido .

Exibe uma caixa de diálogo para o usuário digitar um valor, que é capturado como string para ser processado .

Acessando a propriedade style.color do elemento pelo JavaScript e definindo uma cor como 'red', 'green' ou 'orange' .

Porque são dois tipos de erro diferentes: primeiro verifica se é número, depois se está no intervalo, com mensagens específicas para cada um .

Usando addEventListener('click', funcao) ou o atributo onclick chamando uma função diretamente .

Sim, é uma base comum para validação de campos em sistemas web, como idade, quantidade, CEP, etc.

Sim, ele junta DOM, condicionais e interação com o usuário em um exemplo só, consolidando vários conceitos importantes .

Sim, a lógica pode ser adaptada para validações de formulários, campos de entrada e feedback visual em sistemas reais .

É a representação da estrutura HTML da página como uma árvore de objetos que o JavaScript pode manipular dinamicamente .

🎬 Assista ao Vídeos completo sobre Refatoração

O vídeo foi feito em Javascript mais o conceito pode ser utilizado em qualquer outra linguagem de programação..

🔗 Conecte-se Comigo

YouTube Site LinkedIn GitHub Instagram

💬 Você sabia que dá pra validar número, texto e intervalo tudo no mesmo formulário? Você validaria esse número de outra forma? Como você faria? Escreve aqui nos comentários! 👇

#JavaScript #DOM #ValidacaoDeFormulario #JavaScriptParaIniciantes #RogerioPontesTI