0

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>

2 respuestas 2

1

Bueno logré solucionarlo, cuando el decisión_submit se define en true or false, hice que se agregue un atributo onsubmit al elemento html, cuyo valor es "return false" si el decision_submit es falso. Y al comienzo de la función validar_formulario() hago que se le asigne un "return true" para resetear el false en caso de haberse equivocado y haber corregido el error.

0

El problema está en esta función:

function no_enviar(){
    formulario.addEventListener('submit', event => {
        event.preventDefault();
    });
}

Una vez que agregas ese eventListener cada vez que el usuario haga click en submit el event.preventDefault() se ejecuta automáticamente sin importar si los datos son válidos o no.

En vez de usar el onClick del botón, mejor usa el onSubmit del form.

//boton.addEventListener("click",validar_formulario);

formulario.addEventListener("submit", validar_formulario);

Y dentro de validar_folrmulario en vez de llamar a no_enviar() pon event.preventDefault() directamente.

1
  • Buen dia Fede, sigue sin funcionar, necesito la manera de reiniciar los parametros iniciales, pero ese preventDefult sigue activado. Commented el 24 abr. 2022 a las 13:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.