-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1.4-limites.html
34 lines (33 loc) · 1.56 KB
/
1.4-limites.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<title>Formulário</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Oficina de Validação de Dados com JavaScript</h1><br>
<h2>Estabelecendo Limites</h2><br>
<p>Número da Sorte:</p>
<input type="number" id="num" max="500"><br><br>
<!-- Com o atributo MAX, pode-se limitar o número máximo em um campo de texto do tipo NUMBER -->
<button type="submit" onclick="return limitar();" class="btn btn-primary">Click!</button>
<br><br><p id="txt"></p>
<script>
function limitar() {
txt = document.getElementById("txt");
// Com a API de validação do JS/HTML, é possível utilizar, dentre outros recursos, o rangeOverflow, que limita o máximo
if (document.getElementById("num").validity.rangeOverflow) {
txt.innerHTML = "Número acima do intervalo permitido. Digite um número entre 100 e 500!";
txt.className = "bg-danger"; return false;
// O className faz com que a classe do elemento ~capturado~ seja alterada
// Retornará falso, pois o número digitado foi acima do permitido
} else {
txt.innerHTML = "Número dentro do limite permitido!";
txt.className = "bg-success"; return true;
}
}
</script>
</body>
</html>