9
respostas

Aqui CPF tá valido de qq jeito =(

Oi! Escrevi o CPF 11111111111, 55555555555, todos são válidos... 11111111113, tb tá válido... estranho. Onde posso corrigir? Segue os codigos abaixo de validação:

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

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

  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)
  }
}

const tiposDeErro = [
  'valueMissing',
  'typeMismatch',
  'patternMismatch',
  'customError'
]

const mensagensDeErro = {
  nome: {
      valueMissing: 'O campo de nome não pode estar vazio.'
  },
  email: {
      valueMissing: 'O campo de email não pode estar vazio.',
      typeMismatch: 'O email digitado não é válido.'
  },
  senha: {
      valueMissing: 'O campo de senha não pode estar vazio.',
      patternMismatch: 'A senha deve conter entre 6 a 12 caracteres, deve conter pelo menos uma letra maiúscula, um número e não deve conter símbolos.'
  },
  dataNascimento: {
      valueMissing: 'O campo de data de nascimento não pode estar vazio.',
      customError: 'Você deve ser maior que 18 anos para se cadastrar.'
  },
  cpf: {
    valueMissing: 'O campo de CPF não pode estar vazio',
    customError: 'O CPF digitado não é válido.'
  }
}

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

function mostraMensagemDeErro(tipoDeInput, input) {
  let mensagem = ''
  tiposDeErro.forEach(erro => {
      if(input.validity[erro]) {
          mensagem = mensagensDeErro[tipoDeInput][erro]
      }
  })
  qtas 
  return mensagem
}

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
}

function validaCPF(input) {
  const cpfFormatado = input.value.replace(/\D/g, '')
  let mensagem = ''

  if(! checaCPFRepetido(cpfFormatado)) {
    mensagem = 'O CPF digitado não é válido.'
  }

  input.setCustomValidity(mensagem)
}

function checaCPFRepetido(cpf) {
  const valoresRepetidos = [
    '00000000000',
    '11111111111',
    '22222222222',
    '33333333333',
    '44444444444',
    '55555555555',
    '66666666666',
    '77777777777',
    '88888888888',
    '99999999999'
  ]
  let cpfValido = true

  valoresRepetidos.forEach(valor => {
    if(valor == cpf) {
        cpfValido = false  
    }
  })

  return cpfValido 
}
9 respostas
    <section class="cartao">
        <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" data-tipo="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" data-tipo="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, um número e não deve conter símbolos." data-tipo="senha" 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" data-tipo="cpf" required>
                    <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>

Segue os codigos completo:

https://github.com/Laisayuri/Doguito_PetShop_Validacao

Alguém pode me ajudar? Meu válido não tá funcionando.

Grata

Oie, Lais! Tudo bem?

A verificação do CPF não está funcionando pois no arquivo validacao.js, no checaDigitoVerificador (linha 127) você escreveu let multiplicador = multiplicador mas o correto seria let multiplicadorInicial = multiplicador. Essa função também está fechando no local errado (linha 133), ela deveria fechar após o último return false ( linha 140). Desse modo:

function checaDigitoVerificador(cpf, multiplicador){
  if(multiplicador >= 12) {
    return true
  }

  let multiplicadorInicial = multiplicador
  let soma = 0
  const cpfSemDigitos = cpf.substr(0, multiplicador - 1).split('')
  const digitoVerificador = cpf.charAt(multiplicador - 1)
  for(let contador = 0; multiplicadorInicial > 1; multiplicadorInicial--)
    soma = soma + cpfSemDigitos[contador] * multiplicadorInicial
    contador++


  if(digitoVerificador == confirmaDigito(soma)) {
    return checaDigitoVerificador(cpf, multiplicador + 1)
  }

  return false
}

Obrigada por compartilhar o github, fica mais fácil de testar o código.

Oi novamente rs Arrumei, recarreguei o navegador porém ele continua tá validando com cpf repetidos. Ai apaguei meus códigos e copiei seu código, colei. Ele anda mesma coisa o problema rs.

Olá!

Testei baixar aqui novamente seu projeto que subiu as alterações que eu falei e ele funciona a validação, só não estava aparecendo a mensagem customizada:

Um formulário de cpf com o cpf 11111111111, avisando que o campo não está válido

E isso acontece pois está escrito "qtas" na linha 58, que acredito que foi sem querer:

Trecho de código

Depois de retirar isso, ao testar colocar um cpf com todos números repetidos, acontece isso:

Um formulário de cpf com o cpf 11111111111, avisando que o CPF não é valido

Oi Lais, tudo bem?

"Forkei" teu repo no Github, fiz algumas alterações aqui e submeti uma PR pra voce.

dá uma olhada la... por aqui está validando os inputs.

espero que te ajude.. abraço.

Obrigada pelo toque, Mônica! Sim foi sem querer, apaguei "qtas" mas mesmo assim que validação não está funcionando, q triste! rs

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Oiê Eraldo! Tudo bom e vc? Imagina! Eu adorei seu comentário. Agradeço pela sua ajuda! Muito estranho aqui, fiz alteração todos ' ' para " " e também ; (rsrs) mesmo assim que minha validação não está funcionando. Tu fez teste c/ meus códigos, deu certo com a validação? Muito obrigada!

Lais,

Fiz as alterações e testei, funcionou as validaçoes por aqui.

La no github vc pode visualizar as alterações... caso deseje, pode aceitar a pull request que mandei.. depois faz um pull no teu projeto e roda na tua maquina.

Ou entra aqui https://github.com/eraldosiniciof/Doguito_PetShop_Validacao, que é o teu repositório que dei "fork".. baixa o projeto e roda.

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