Formatação automática de data, celular, etc

[John Hebert Trindade]

Tenho o código abaixo em javascript para configurar os formatos do campo: data, telefone, celular, etc que esta funcionando perfeitamente, feitos por este video: https://youtu.be/r-8isv_TnVA?si=GWCLT-xY58QsWmay

No formulário em html basta adicionar na tag input (ex. data-js="tel")

Criar um arquivo js e adicionar o código abaixo.

const masks = {
  date(value) {
    return value
      .replace(/\D+/g, '')
      .replace(/(\d{2})(\d)/, '$1-$2')
      .replace(/(-\d{2})(\d)/, '$1-$2')
      .replace(/(-\d{4})\d+?$/, '$1')
  },

  tel(value) {
    return value
      .replace(/\D+/g, '')
      .replace(/(\d{3})(\d)/, '(+$1) $2')
      .replace(/(\d{3})(\d)/, '$1 $2')
      .replace(/(\d{3})(\d)/, '$1 $2')
      .replace(/( \d{3})\d+?$/, '$1')
  },

  tlm(value) {
    return value
      .replace(/\D+/g, '')
      .replace(/(\d{3})(\d)/, '(+$1) $2')
      .replace(/(\d{3})(\d)/, '$1 $2')
      .replace(/(\d{3})(\d)/, '$1 $2')
      .replace(/( \d{3})\d+?$/, '$1')
  },

  nif(value) {
    return value
      .replace(/\D+/g, '')
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(.\d{3})\d+?$/, '$1')
  },

  cnp(value) {
    return value
      .replace(/\D+/g, '')
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d)/, '$1-$2')
      .replace(/(-\d{2})\d+?$/, '$1')
  },

  postal(value) {
    return value
      .replace(/\D+/g, '')
      .replace(/(\d{4})(\d)/, '$1-$2')
      .replace(/(-\d{3})\d+?$/, '$1')
  }
}

document.querySelectorAll('input').forEach(($input) => {
  const field = $input.dataset.js

  $input.addEventListener(
    'input',
    (e) => {
      e.target.value = masks[field](e.target.value)
    },
    false
  )
})

Mas se existir algum campo que não entra na validação Ex. nome, data, cidade entre outros, da o seguinte erro:

Uncaught TypeError: masks[field] is not a function
    at HTMLInputElement.<anonymous> (custom_adms.js:730:36)

Erro esse que não influencia na funcionalidade, mas gostaria de resolver.

 

[Rui Carlos]

Isso não está a apanhar outros inputs aos quais não é suposto aplicares validações?

Antes de aplicar a função, podes verificar se field tem um dos valores esperados.  Se não tiver, não aplicas a função.

[John Hebert Trindade]

O erro esta na linha abaixo marcada.

faltou colocar o que iria procurar na campo input, sei que tem um nome especifico mas no momento não me veio a cabeça.

document.querySelectorAll('input        ['data-js']          ').forEach(($input) => {  //faltou adicionar nesta linha ['data-js']
  const field = $input.dataset.js

  $input.addEventListener(
    'input',
    (e) => {
      e.target.value = masks[field](e.target.value)
    },
    false
  )
})

 

[John Hebert Trindade]

Agora estou com outro problema neste mesmo código.

O código funciona bem, e quando digito formata como quero.

Mas se o valor estiver errado não consigo corrigir, tenho que selecionar todo apagar e voltar a introduzir.

Como posso corrigir?

[user]

Em 22/02/2024 às 23:37, John Hebert Trindade disse:

Agora estou com outro problema neste mesmo código.

O código funciona bem, e quando digito formata como quero.

Mas se o valor estiver errado não consigo corrigir, tenho que selecionar todo apagar e voltar a introduzir.

Como posso corrigir?

 

No evento, valida se o caractere introduzido não é um backspace.
Se calhar vais ter de alterar para um evento de keyup e fazer a validação por ai