Entrar Ainda não tem acesso?
4
respostas

Minha validação deixou de funcionar após aplicar o código da aula.

Referente ao curso JavaScript na Web: validação de Formulários e HTML5, no capítulo Validações customizadas e atividade Melhorando o código

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

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

    return dataMais18 <= dataAtual;
}

Código app.js

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

const inputs = document.querySelectorAll('input')

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

E sim, eu chamei ambos os scripts no HTML.

4 respostas
por Douglas de Oliveira Lima
| 137k xp | 47 posts

Olá!

Não é necessário importar os dois scripts para o arquivo html, basta importar o app.js, pois a função valida já está sendo importada diretamente no script.

Agora sobre o código não funcionar, aparentemente não tem erro nele, porém, você não definiu nenhuma ação de resposta visual para o caso do valor dos campos seja inválido. Segundo o exemplo do próprio professor, para gerar a estilização ao redor dos inputs, é necessário incluir o seguinte trecho na função valida().

export function valida(input) {
    const tipoDeInput = input.dataset.tipo

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

    // Trecho faltante
    if (input.validity.valid) {
        input.parentElement.classList.remove('input-container--invalido')
        input.parentElement.querySelector('.input-mensagem-erro').innerHTML = ''
    }
    else {
        input.parentElement.classList.add('input-container--invalido')
        input.parentElement.querySelector('.input-mensagem-erro').innerHTML = mostraMensagemDeErro(tipoDeInput, input)
    }
}
por Kelwin Deriz Hollunder
| 182.8k xp | 114 posts
Designer Gráfico

Olá Douglas, tudo certo contigo?

Grato pela sua atenção! Coloquei o código qeu tu mencionou, porém ainda sim meu formulário está validando menores de idade.

por Jainara Nátaly Câmara
| 108.5k xp | 15 posts

Aqui também parou de funcionar a validação. Já conferi todo o código e não vejo nada de diferente da aula, mas não funciona.

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

Oi Jainara!

Na próxima aula ele explica como resolver o problema.