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()
mes < 12
, e está numelse if
, logo depende de não passar pelo primeiro if... além disso não da pra dizer muita coisa sem ver ohtml
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