Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Erro Validação Data

Alguém poderia ajudar, por favor? estou realizando a criação do código junto com o instrutor e, ao inserir type="module", instalar o Live server e clicar em go to live, tudo funciona até o momento de colocar a data, que, mesmo colocando a data que não deveria ser aceita, a pagina aceita e o google mostra o seguinte erro: validacao.js:26 Uncaught TypeError: data.getUTCFullyear is not a function at maiorQue18 (validacao.js:26) at validaDataNascimento (validacao.js:17) at Object.dataNascimento (validacao.js:10) at valida (validacao.js:5) at HTMLInputElement. (app.js:7)![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade Os codigos são: validacao.js: `export function valida(input) { const tipoDeInput = input.dataset.tipo

if(validadores[tipoDeInput]) {
    validadores[tipoDeInput](input)
}

}

const validadores = { dataNascimento:input => validaDataNascimento(input) }

function validaDataNascimento(input) { const dataRecebida = new Date(input.value) let mensagem = ''

if(!maiorQue18(dataRecebida)) {
    mensagem = 'Você deve ser maior que 18 anos para se cadastrar.'
}

input.setCustomValidity(mensagem)

}

function maiorQue18(data) { const dataAtual = new Date() const dataMais18 = new Date(data.getUTCFullyear() + 18, data.getUTCMonth(), data.getUTCDate())

return dataMais18 <= dataAtual

} `

3 respostas

O app.js:

import { valida } from './validacao.js'

const inputs = document.querySelectorAll('input')

inputs.forEach(input => {
    input.addEventListener('blur', (evento) => {
        valida(evento.target)
    })
})

E o html a partir da linha 22:

<h2 class="cartao__titulo">Complete seu cadastro</h2>
            <form action="./cadastro_concluido.html" class="formulario flex flex--coluna">
                <fieldset>
                    <legend class="formulario__legenda">Informações básicas</legend>
                    <div class="input-container">
                        <input name="nome" id="nome" class="input" type="text" placeholder="Nome" required>
                        <label class="input-label" for="nome">Nome</label>
                        <span class="input-mensagem-erro">Este campo não está válido</span>
                    </div>
                    <div class="input-container">
                        <input name="email" id="email" class="input" type="email" placeholder="Email" required>
                        <label class="input-label" for="email">Email</label>
                        <span class="input-mensagem-erro">Este campo não está válido</span>
                    </div>
                    <div class="input-container">
                        <input name="senha" id="senha" class="input" type="password" placeholder="Senha" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?!.*[!@#$%^&*_=+-]).{6,12}$" title="A senha deve conter entre 6 a 12 caracteres, deve conter pelo menos uma letra maiúscula, uma minúscula, um número e não deve conter símbolos." required>
                        <label class="input-label" for="senha">Senha</label>
                        <span class="input-mensagem-erro">Este campo não está válido</span>
                    </div>
                </fieldset>
                <fieldset>
                    <legend class="formulario__legenda">Informações pessoais</legend>
                    <div class="input-container">
                        <input name="nascimento" id="nascimento" class="input" type="date" placeholder="Data de nascimento" data-tipo="dataNascimento" required>
                        <label class="input-label" for="nascimento">Data de nascimento</label>
                        <span class="input-mensagem-erro">Este campo não está válido</span>
                    </div>
                    <div class="input-container">
                        <input name="cpf" id="cpf" class="input" type="text" placeholder="CPF">
                        <label class="input-label" for="cpf">CPF</label>
                        <span class="input-mensagem-erro">Este campo não está válido</span>
                    </div>
                </fieldset>
                <fieldset>
                    <legend class="formulario__legenda">Endereço</legend>
                    <div class="input-container">
                        <input name="cep" id="cep" class="input" type="text" placeholder="CEP">
                        <label class="input-label" for="cep">CEP</label>
                        <span class="input-mensagem-erro">Este campo não está válido</span>
                    </div>
                    <div class="input-container">
                        <input name="logradouro" id="logradouro" class="input" type="text" placeholder="Logradouro">
                        <label class="input-label" for="logradouro">Logradouro</label>
                        <span class="input-mensagem-erro">Este campo não está válido</span>
                    </div>
                    <div class="input-container">
                        <input name="cidade" id="cidade" class="input" type="text" placeholder="Cidade">
                        <label class="input-label" for="cidade">Cidade</label>
                        <span class="input-mensagem-erro">Este campo não está válido</span>
                    </div>
                    <div class="input-container">
                        <input name="estado" id="estado" class="input" type="text" placeholder="Estado">
                        <label class="input-label" for="estado">Estado</label>
                        <span class="input-mensagem-erro">Este campo não está válido</span>
                    </div>
                </fieldset>
                <button class="botao">Cadastrar</a>
            </form>
        </section>
    </main>
    <script src="./js/app.js" type="module"></script>
</body>
</html>
solução!

Boa tarde Bruno!

validacao.js:26 Uncaught TypeError: data.getUTCFullyear is not a function at ....

Embora você não tenha postado o código completo de validacao.js o que dá pra ver é que o console ta dizendo que o data.getUTCFullyear não é função porque o Y de Year tem que ser maiúsculo, assim: getUTCFullYear() Talvez você mesmo já tenha encontrado a resposta, daí é só marcar a dúvida como solucionada.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software