Boa tarde, tentei implementar um if que se algum campo der erro ele não roda, mas está me voltando um erro no console que é Cannot read properties of null (reading 'match')
Estou fazendo estes testes apenas no 1 formulário
JavaScript
document.getElementById('formulario-01').addEventListener('submit', function(evento) {
evento.preventDefault();//Cancela o evento
evento.stopPropagation();
if(this.getAttribute('class').match(/'erro'/)) {//não roda o código se algum campo der erro
return false;
}
let dados = new FormData(this);
let objeto = {};
let notas = [];
for(let key of dados.keys()) {
let numero = dados.get(key).match(/\d*/) ? Number(dados.get(key)) : 0// é um número
if(!isNaN(numero)) {
notas.push(numero);
}
//notas.push(parseInt(dados.get(key)));//adiciona itens no array;
}
console.log(notas);
console.log(objeto);
texto = aprovacao(notas);
document.getElementById('resultado').innerHTML = texto;
});
function validaCampo(elemento) {
elemento.addEventListener('focusout', function(evento) {//focusout->sai do objeto
evento.preventDefault();
if(this.value.match(/\d*/)) {
document.querySelector('.mensagem').innerHTML = "Verifique o preenchimento";
this.classList.add('erro');
this.parentNode.classList.add('erro');
return false;
}else{
document.querySelector('.mensagem').innerHTML = "";
this.classList.remove('erro');
this.parentNode.classList.remove('erro');
}
});
}
function validaCampoNumerico(elemento) {
elemento.addEventListener('focusout', function(evento) {//focusout->sai do objeto
evento.preventDefault();
if(this.value !='' && this.value.match(/[0-9]*/) && this.value >= 0 && this.value <=10) {
document.querySelector('.mensagem').innerHTML = "";
this.classList.remove('erro');
this.parentNode.classList.remove('erro');
}else{
document.querySelector('.mensagem').innerHTML = "Verifique o preenchimento";
this.classList.add('erro');
this.parentNode.classList.add('erro');
return false;
}
});
}
let camposObrigatorios = document.querySelectorAll('input.obrigatorio');
let camposNumericos = document.querySelectorAll('input.numero');
for(let emFoco of camposObrigatorios) {
validaCampo(emFoco);
}
for(let emFoco of camposNumericos) {
validaCampoNumerico(emFoco)
}HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>JavaScript</title>
</head>
<body>
<div class="container">
<div class="mensagem"></div>
<form id="formulario-01">
<h2>Calculo de Média</h2>
<p>Preencha as notas de 0 a 10</p>
<input type="number" placeholder="Digite um número" class="numerico" name="N1">
<input type="number" placeholder="Digite um número" class="numerico" name="N2">
<input type="number" placeholder="Digite um número" class="numerico" name="N3">
<input type="number" placeholder="Digite um número" class="numerico" name="N4">
<button type="submit">Enviar</button>
</form>
<form id="formulario-02">
<h2>Faça seu cadastro</h2>
<input type="text" placeholder="digite seu nome" class="obrigatorio" name="nome">
<input type="text" placeholder="digite seu email" class="obrigatorio email" name="email">
<input type="text" placeholder="digite seu telefone" class="" name="telefone">
<input type="text" placeholder="digite seu cep" class="numerico" name="cep">
<input type="text" placeholder="digite seu cidade" class="obrigatorio" name="cidade">
<input type="text" placeholder="digite seu uf" class="obrigatorio uf" name="uf">
<button type="submit">Enviar</button>
</form>
<div id="resultado">
</div>
</div>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>
