Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Fiz exatamente como na aula, porém continua validando menores de 18 anos.

Referente ao curso JavaScript na Web: validação de Formulários e HTML5, no capítulo Validações customizadas e atividade Lógica para validar data de nascimento

por Kelwin Deriz Hollunder
| 182.8k xp | 114 posts
Designer Gráfico

JS

const dataNascimento = document.querySelector('#nascimento'); 

dataNascimento.addEventListener('blur', (evento) => {
    validaDataNascimento(evento.target)
})

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();  //date() é automaticamente preenchido com a data atual
    const dataMais18 = new Date(data.getUTCFullYear() + 18, data.getUTCMonth(), data.getUTCDate());

    return dataMais18 <= dataAtual;
}

HTML:

<script src="./js/validacao.js" type="module"></script>

Por favor me ajudem, tô ficando maluco já.

6 respostas
por Kelwin Deriz Hollunder
| 182.8k xp | 114 posts
Designer Gráfico

Baixei o código do professor e também valida menores de 18 anos.

Esse descaso me deixou frustrado em níveis que nem sei definir.

por Matheus Alberto
| 131.9k xp | 103 posts
Instrutor Instrutor e Desenvolvedor

Fala Kelwin, tranquilo?

Tem um erro no seu código quando você declarou a função maiorQue18(data). Você escreveu a letra "q" minúscula na declaração da função e "Q" maiúsculo na chamada dentro da função validaDataNascimento(input).

Não fique tão frustrado porque isso é algo que acontece até com quem é mais experiente (a frequência só diminui, mas nunca é 0). Esquecer " ; " no final de uma propriedade CSS é algo que já fiz muuuuito!

Espero ter ajudado e bons estudos!

por Kelwin Deriz Hollunder
| 182.8k xp | 114 posts
Designer Gráfico

Oi Matheus, você está mais que certo, se frustrar assim só atrapalha em nossa jornada e esse tipo de coisa é recorrente, também já sofri muito ao simplesmente esquecer de importar meu css dentro do html kkkk

Mas sobre a dúvida, desde já fico muito grato, porém mesmo aplicando a correção, também não funcionou :/

Também testei o código do professor e validou menores de 18 anos :/

Vou deixar o link do repositório aqui para facilitar teu acesso no meu código: https://github.com/MasterKelwin/validacao-doguito-main

obs: agora que vi que é você o professor, com certeza a melhor pessoa para sanar minha dúvida! kkkk

solução!
por Matheus Alberto
| 131.9k xp | 103 posts
Instrutor Instrutor e Desenvolvedor

Opa! Sem problemas!

Eu esqueci de falar que você não precisa usar o atributo type="module" na importação do seu JavaScript. Geralmente usamos este atributo quando trabalhamos com requisições de outros arquivos, por exemplo um arquivo que faça um import de outras bibliotecas. Para realizar o import ele precisa fazer uma requisição HTTP e para isso sua aplicação precisa estar rodando em um servidor HTTP.

Se você checar o console, vai ver que com type="module" ele dá um erro de CORS. Na Aula 3 eu explico melhor sobre esse problema.

Qualquer outra dúvida só chamar!

por Kelwin Deriz Hollunder
| 182.8k xp | 114 posts
Designer Gráfico

Muitssímo obrigado Matheus, funcionou perfeitamente.

por Ygor Dimas
| 58.1k xp | 1 posts

O meu código também estava idêntico ao da aula mas continuava validando o envio do formulário para menores de 18, a solução que encontrei foi adicionar um input.reportValidity() dentro do if

if (!maiorQue18(dataRecebida)) {
        mensagem = 'Você deve ter mais que 18 anos'
        input.reportValidity();
    }

    input.setCustomValidity(mensagem);