buenas tardes, estoy aprendiendo a validar formularios, tengo un problema al momento de realizar el submit. La cuestion es la siguiente, el programa realiza una verificacion de los campos y me agrega un "ok" o un "error" a un array, luego con un bucle for leo si existe la presencia de un "error" y de ser asi cancelo el envio del formulario con un preventDefault(). El tema es que cuando el usuario corrige lo que esta mal y le vuelve a dar a enviar el preventDefault() sigue teniendo efecto. si yo pongo los valores bien de entrada el formulario se envia correctamente pero si me equivoco una primera vez y se dispara el preventDefault() el usuario ya no tiene manera de realizar el submit. hay alguna manera de eliminar el preventDefault?
Gracias
var nombre = document.getElementById("nombre");
var apellido = document.getElementById("apellido");
var email = document.getElementById("email");
var comentario = document.getElementById("area_comentario");
var boton = document.getElementById("submit");
var formulario = document.getElementById("formulario");
var aviso = document.getElementById("errores_formulario");
var contador_caracteres = document.getElementById("contador_caracteres")
var expReg = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
var solo_letras = /[0-9]/
var chequeo = []
var decision_submit = null
boton.addEventListener("click",validar_formulario);
comentario.addEventListener("keyup",contador);
function contador() {
contador_caracteres.innerHTML = "Caracteres restantes: " + (200 - comentario.value.length);
}
function validar_formulario() {
aviso.innerHTML = "";
decision_submit = true
if (nombre.value === "") {
aviso.innerHTML += "<p>* Introduzca su nombre</p>";
chequeo[0] = "error";
} else chequeo[0] = "ok";
if (nombre.value.length > 30) {
aviso.innerHTML += "<p>* Nombre demasiado largo</p>";
chequeo[1] = "error";
} else chequeo[1] = "ok";
if (solo_letras.test(nombre.value)) {
aviso.innerHTML += "<p>* Su nombre no puede contener numeros</p>";
chequeo[2] = "error";
} else chequeo[2] = "ok";
if (apellido.value === "") {
aviso.innerHTML += "<p>* Introduzca su apellido</p>";
chequeo[3] = "error";
} else chequeo[3] = "ok";
if (apellido.value.length > 30) {
aviso.innerHTML += "<p>* Apellido demasiado largo</p>";
chequeo[4] = "error";
} else chequeo[4] = "ok";
if (solo_letras.test(apellido.value)) {
aviso.innerHTML += "<p>* Su apellido no puede contener numeros</p>";
chequeo[5] = "error";
} else chequeo[5] = "ok";
if (email.value === "") {
aviso.innerHTML += "<p>* Introduzca un email</p>";
chequeo[6] = "error";
chequeo[7] = "error";
} else if (!(email.value === "")) {
validacion_email();
chequeo[6] = "ok";
}
if (comentario.value === "") {
aviso.innerHTML += "<p>* Realice un comentario o consulta</p>";
chequeo[8] = "error";
} else chequeo[8] = "ok";
if (comentario.value.length > 200) {
aviso.innerHTML += "<p>* Ha excedido los 200 caracteres</p>";
chequeo[9] = "error";
} else chequeo[9] = "ok";
for (var i=0;i<10;i++) {
if (chequeo[i]=="error") {
decision_submit = false;
}
}
if (decision_submit == false) {
no_enviar();
}
}
function validacion_email () {
var validar_correo = expReg.test(email.value)
if (validar_correo == false) {
aviso.innerHTML += "<p>* Introduzca un email válido</p>";
chequeo[7] = "error"
} else chequeo[7] = "ok"
}
function no_enviar(){
formulario.addEventListener('submit', event => {
event.preventDefault();
});
}
.contactenos h3 {
font-size: 2rem;
color: rgb(94, 92, 92);
text-align: center;
padding-top: 4%;
margin-bottom: 3%;
}
.centrado_contacto {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 80%;
height: auto;
padding-bottom: 40px;
border-radius: 30px;
background-color: rgb(226, 223, 223);
color: rgb(94, 92, 92);
}
.ubicacion {
font-size: 1.4rem;
right: 10%;
margin-top: 50px;
}
.ubicacion iframe {
margin-top: 10px;
width: 350px;
height: 350px;
}
.formulario {
left: 10%;
}
label {
width: 100px;
display: inline-block;
}
input {
border: none;
padding: 10px;
}
textarea {
border: none;
width: 310px;
height: 70px;
padding: 10px;
}
#contador_caracteres {
font-size: 0.6rem;
float: right;
}
#errores_formulario {
color: rgb(238, 9, 9);
font-size: 0.8rem;
padding-bottom: 5px;
}
#submit {
color: #fff;
background-color: #5591c5;
border-radius: 10px;
cursor: pointer;
transition: 300ms ease;
}
#submit:hover {
color: #5591c5;
background-color: #fff;
}
.formulario div {
margin: 5px 0;
}
.formulario h4 {
font-size: 1.4rem;
margin-top: 50px;
margin-bottom: 25px;
}
<section class="contactenos">
<p id="contactenos"></p>
<h3>CONTACTENOS</h3>
<div class="centrado_contacto">
<div class="formulario">
<h4 class="titulo_consulta">REALICE SU CONSULTA</h4>
<form id="formulario" action="pages/recepcion.html">
<div class="nombre">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre">
</div><br>
<div class="apellido">
<label for="apellido">Apellido:</label>
<input type="text" id="apellido">
</div><br>
<div class="email">
<label for="email">E-mail:</label>
<input type="text" id="email">
</div><br>
<div class="comentarios">
<label for="area_comentario">Comentarios:</label><br>
<textarea name="area_comentario" id="area_comentario" cols="30" rows="10"></textarea><br>
<p id="contador_caracteres">Caracteres restantes: 200</p>
</div><br>
<div id="errores_formulario"></div>
<input id="submit" type="submit" value="Enviar">
</form>
</div>
<div class="ubicacion">
<h4>DONDE ESTAMOS</h4>
<div class="iframe_mapa"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d13133.701213699454!2d-58.36770276089819!3d-34.618691112271485!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2sar!4v1649795657587!5m2!1ses!2sar" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>
</div>
</div>
</section>