Entrar Ainda não tem acesso?
1
resposta

Não entendi o código dessa 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 ELAUDIO PIMENTA DO CARMO
| 85.4k xp | 3 posts
Estagiário setor fiscal

Nessa aula mudamos o código para se tornar mais universal para a validação e não apenas para a validação de data:

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
}

entretantom não entendi o que acontece no seguinte trecho do código

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

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

const validadores = {
    dataNascimento:input => validaDataNascimento(input)
}
1 resposta
por Douglas de Oliveira Lima
| 137k xp | 47 posts

No HTML do projeto foram adicionados atributos de dataset nos inputs que precisam ser validados (No caso, o data-tipo). Com isso em mente, esse trecho de código tem como objetivo extrair o data-tipo do input informado como parâmetro e, se existir um validador para ele no objeto validadores, ele vai executar a função correspondente.

Vou repostar o código, mas com os comentários do que cada linha está armazenando/executando:

// input corresponde ao elemento html.
export function valida(input) {

    // Extraindo o data-tipo do input, ou seja, const tipoDeInput = dataNascimento.
    const tipoDeInput = input.dataset.tipo

    // Se validadores[dataNascimento] existir, executar a função declarada como valor desse atributo.
    if(validadores[tipoDeInput]) {
        validadores[tipoDeInput](input)
    }
}

// Objeto que contém os data-tipos que passarão por validação e qual será a validação aplicada para cada tipo.
// dataNascimento é o atributo.
// input => validaDataNascimento(input) é uma arrow function que será ativada ao chamar validadores[dataNascimento](input).
const validadores = {
    dataNascimento:input => validaDataNascimento(input)
}