DOM e Validação JavaScript

Ícaro Prado
 DOM – Document Object Model

O JavaScript pode acessar e alterar todos os elementos de um documento

HTML.

Quando uma página da Web é carregada, o navegador cria um DOM.

O HTML DOM é um padrão de como obter, alterar, adicionar ou excluir

elementos HTML.
DOM – Document Object Model

O modelo HTML DOM é construído como uma árvore de objetos:

 DOM – Document Object Model

Com o DOM, o JavaScript obtém todo o poder necessário para criar HTML
dinâmico:

• Pode alterar todos os elementos e atributos HTML

• Pode alterar todos os estilos CSS
• Pode remover elementos e atributos HTML existentes
• Pode adicionar novos elementos e atributos HTML
 getElementBy

Para acessar e manipular HTML.

<script>
let x = document.getElementById("demo");
</script>
 innerHTML

Útil para obter ou substituir o conteúdo de elementos HTML.

<p id="p1">Olá Mundo!</p>

<script>
document.getElementById("p1").innerHTML = "Novo texto!";
</script>
 DOM – Document Object Model

<h1 id="id1">Título</h1>

<script>
let element = document.getElementById("id1");
element.innerHTML = "Novo Título";
</script>
 Exemplo

Alterar o conteúdo (o innerHTML) do <p> com id="demo":

<p id="demo"></p>

<script>
let x = document.getElementById("demo");
x.innerHTML = “Olá Mundo!";
x.style.color = "red";
</script>
 Validação de Formulários

Javascript pode ser utilizado para validar a entrada do usuário antes que
esta seja enviada para o servidor:

• Campos obrigatórios foram deixados em branco?

• O usuário informou um e-mail válido?
• O usuário informou uma data válida?
• O usuário entrou com um texto em um campo numérico?
 Validação de Formulários

A validação de formulários pode ser feita por JavaScript e/ou pelo

próprio HTML5.

O HTML5 trouxe inovações como validação automática de campos de

formulário.

<form name="form1" action=“recebe.php” method=“get”>

</form>
 Validação de Formulários

HTML5 inclui novos tipos de campo (type):

email, url, date, month, week, time, datetime, number, ...

Atributos:
max (valor máximo para um campo numérico), min, ...

Idade<input type=“number” name=“idade” id=“idade” min=“0”

max=“100”>
 Required

Define que um campo deve ser obrigatoriamente preenchido antes de

realizar submit no formulário.

Submeter com campo vazio gera mensagem de erro.

Nome: <input type=“text” name=“nome” id=“nome” required>

 Placeholder

Texto inicial de auxílio de preenchimento de um campo.

Nome: <input type=“text” name=“nome” id=“nome”

placeholder=“Digite seu nome” required>
<form name="form1" action="recebe.html" onsubmit="return validar()" method="get">

<label>Nome: </label>
<input type="text" id="nome" name="nome" placeholder=“Seu nome” required>

<label>E-mail: </label>
<input type="email" id="email" name="email" placeholder=“Seu e-mail” required>

<label>Senha: </label>
<input type="password" id="senha1" name="senha1" required>

<label>Confirmar senha: </label>

<input type="password" id="senha2" name="senha2“ required>

<input type="submit" value="Enviar">

<input type="reset" value="Limpar">
</form>
 Validação de Formulários

Para o formulário criado, além da validação do campo Nome estar

preenchido, o campo E-mail deve conter um e-mail na forma correta.

Há outra regra: Os campos Senha e Confirmar senha precisam ter os

valores iguais.

Nesse caso, é preciso criar uma função Javascript que recupere o valor
dos campos e efetue essa comparação.
 Validação de Formulários

function validar(){
let s1=document.getElementById("senha1").value;
let s2=document.getElementById("senha2").value;
if (s1!=s2){
alert("Senhas não conferem");
return false;
}
}
 Exemplo

Validar entradas numéricas

<p>Entre com um número de 1 and 10:</p>

<input id="n">

<button type="button" onclick=“valida()">Submit</button>

<p id="demo"></p>
 Exemplo

function valida() {
let x = document.getElementById("n").value;
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = “Entrada não válida";
} else {
text = “Entrada OK";
}
document.getElementById("demo").innerHTML = text;
}
 Capturar Valores de um Input

<form name="form1" action="" method="get">

<label>Nome: </label>
<input type="text" id="nome" name="nome" required><br><br>

<input type="submit" value="Enviar" onclick="capturar()">

</form>
 Capturar Valores de um Input

function capturar() {
let c = document.getElementById("nome").value;
if (c == "") {
alert("campo vazio");
return false;
}
else {
alert(c);
return true;}
}
 Capturar Valores de um Input

<input id="numb1">
+
<input id="numb2">

<p id="res"></p>

<button type="button" onclick="somar()">Somar</button>

 Capturar Valores de um Input

function somar()
{
let e1 = parseInt(document.getElementById("numb1").value);
let e2 = parseInt(document.getElementById("numb2").value);
document.getElementById("res").innerHTML= "Resposta: " + (e1 + e2);
}
 Atividade

Criar uma página semelhante à figura e implementar em JS uma

calculadora com as 4 operações fundamentais: +, -, *, /.

O valor da caixa select poderá ser obtido da mesma forma que se

obtém o valor das caixas de texto input.

Use a função parseFloat para converter números reais.

Capturar Valores de um Input