Arquivo 'cadastro-usuario.html'
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../../style/theme.css" />
<script type="module" src="../../services/app.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Cadastro de Usuário</title>
</head>
<body>
<div class="container">
<div class="box">
<h1>Cadastro de Usuário</h1>
<form id="form" method="get" action="./cadastro-sucesso.html">
<hr class="divider" />
<h2 class="subtitulo">Informações de Acesso</h2>
<div class="input-container">
<label class="label" for="email">
Email
<span class="info">(Necessário)</span>
</label>
<input class="input" required type="email" name="email" id="email" data-tipo="email"/>
</div>
<div class="input-container">
<label class="label" for="password">Senha <span class="info">(Necessário)</span></label>
<input class="input" required minlength="4" type="password" name="password" id="password" data-tipo="senha"/>
</div>
<hr class="divider" />
<h2 class="subtitulo">Informações Pessoais</h2>
<div class="input-container">
<label class="label" for="dataNascimento">Data de Nascimento <span class="info">(Necessário)</span></label>
<input class="input" min="1900-01-01" required type="date" name="dataNascimento" id="dataNascimento" data-tipo="dataNascimento" />
</div>
<div class="input-container">
<label class="label" for="cpf">CPF <span class="info">(Necessário)</span></label>
<input class="input" required type="text" name="cpf" id="cpf" data-tipo="cpf"/>
</div>
<div class="input-container">
<label class="label" for="rg">RG <span class="info">(Necessário)</span></label>
<input class="input" required type="text" name="rg" id="rg" data-tipo="rg"/>
</div>
<hr class="divider" />
<h2 class="subtitulo">Endereço</h2>
<div class="input-container">
<label class="label" for="cep">CEP <span class="info">(Necessário)</span></label>
<input class="input" required type="text" name="cep" id="cep" data-tipo="cep" pattern="\d{2}.?\d{3}-?\d{3}"/>
</div>
<div class="input-container">
<label class="label" for="logradouro">Logradouro <span class="info">(Necessário)</span></label>
<input class="input" required type="text" name="logradouro" id="logradouro" data-tipo="logradouro"/>
</div>
<div class="input-container">
<label class="label" for="cidade">Cidade <span class="info">(Necessário)</span></label>
<input class="input" required type="text" name="cidade" id="cidade" data-tipo="cidade"/>
</div>
<div class="input-container">
<label class="label" for="estado">Estado <span class="info">(Necessário)</span></label>
<input class="input" required type="text" name="estado" id="estado" data-tipo="estado"/>
</div>
<div class="botao-container">
<button class="botao botao-azul" type="submit" id="botaoSubmit">
Cadastrar Usuário
</button>
</div>
</form>
</div>
</div>
</body>
</html>
Arquivo 'app.js'
import { validarInput } from "./validar.js";
window.onload = () => {
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
if(input.dataset.tipo === 'preco'){
SimpleMaskMoney.setMask(input, {
allowNegative: false,
negativeSignAfter: false,
prefix: 'R$ ',
fixed: true,
fractionDigits: 2,
decimalSeparator: ',',
thousandsSeparator: '.',
cursor: 'end'
});
}
input.addEventListener('input', () => {
validarInput(input, false);
})
input.addEventListener('blur', () => {
validarInput(input);
})
});
}