-2

Olá, estou tentando validar um formulario e estou com duvida no input de mes. Devo fazer a validação para que nao possa aceitar numeros maiores que 12. Porém nao esta funcionando

   function dadosCartao() {
        const numberInput = document.getElementById('number');
        const numberCard = document.getElementById('card-number');
        const number = numberInput.value.replace(/\D/g, '');
        const formattedNumber = number.replace(/(\d{4})(?=\d)/g, '$1 ');
    
        if (formattedNumber !== "") {
            numberInput.value = formattedNumber;
            numberCard.innerHTML = formattedNumber;
        } else {
            numberInput.value = "";
            numberCard.innerHTML = "0000 0000 0000 0000";
        }
    
        const name = document.getElementById('name').value
        const nameCard = document.getElementById('name-card')
    
        if (name !== "") {
            nameCard.innerHTML = name
        } else {
            nameCard.innerHTML = "Jane Appleseed"
        }
    
        const month = document.querySelector('.month').value
        const monthCard = document.getElementById('month');
    
        if (month !== ""){
            monthCard.innerHTML = month;
        } else {
            monthCard.innerHTML = "00"
        }
       
        const year = document.querySelector('.year').value
        const yearCard = document.getElementById('year');
    
        if (year !== ""){
            yearCard.innerHTML = year;
        } else {
            yearCard.innerHTML = "00"
        }
    
        const cvc = document.getElementById('cvc').value
        const cvcCard = document.getElementById('cvcCard')
    
        if(cvc !== ''){
            cvcCard.innerHTML = cvc
        } else{
            cvcCard.innerHTML = '000'
        }
        buttonEvent()
    
    }
    
    function buttonEvent(){
        const buttonContinue = document.getElementById('form')
        const sucess = document.getElementById('sucess')
        buttonContinue.addEventListener('submit', (e) => {
            e.preventDefault()
            buttonContinue.style.display = 'none'
            sucess.style.display = 'flex'
    
        })
        const buttonConfirm = document.getElementById('button-continue')
        buttonConfirm.addEventListener('click', (e) =>{
            e.preventDefault()
            buttonContinue.style.display = 'flex'
            sucess.style.display = 'none'
        })
    }
    dadosCartao()
const errors = [
    "Wrong Format, numbers only",
    "Can't be blank",
    "Invalid month"
]

function validaCartao() {
    const required = document.querySelectorAll('[required]');

    required.forEach(input => {
        input.addEventListener('invalid', (e) => {
            e.preventDefault()
            const elementoMesInvalido = document.querySelector('.month').value;
            const mes = parseInt(elementoMesInvalido)
            if (input.value == '') {
                const para = document.createElement('p');
                para.innerHTML = errors[1];

                input.parentNode.insertBefore(para, input.nextSibling);
            } else if (mes < 12) {
                const divMes = document.querySelector('.data-experiation')
                const errorMonth = document.createElement('p')

                errorMonth.textContent = errors[2]
                divMes.appendChild(errorMonth)
            }
        });
    });



}
validaCartao()

1
  • olá Vitor, já fez debug pra ver se passa no código corretamente? além disso o seu if é mes < 12, e está num else if, logo depende de não passar pelo primeiro if... além disso não da pra dizer muita coisa sem ver o html mas me parece meio estranho procurar todos os inputs require e de repente buscar os elementos com .month, isso não parece ter relação um com o outro, está estranho esse código... sugiro montar um exemplo aqui com o html pra demonstrar o problema, senão vai ser difícil dar uma resposta acertiva 29/08 às 14:29

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .