0

Estoy haciendo un formulario en html5 que tiene validaciones con javaScript. Mi idea es realizar el submit() del formulario con js para controlar cuándo debe enviarse y cuándo no. Sin embargo actualmente el formulario siempre se envía aunque no pase por la función submit(). Adjunto el código html y el js. He agregado una función para validar el DNI que funciona correctamente. Cuando hago debug se puede ver que la función está correcta pero el formulario siempre se envía a pesar de que no tenga metido submit en el botón de Enviar ni pase por la función "formulario.submit()". ¿Alguien puede ver el error y decirme cómo puedo hacer para controlar el envío del formulario?

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carta a papá Noel</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <h1 class="text-right">Carta para Papá Noel...</h1>

    <form id="formulario" action="" method="get">

        <div class="bloque margin-bot"> 
            <label for="nombre" class="ancho-label">Nombre:</label>
            <input list="listaNombre" name="nombre" id="nombre" placeholder="Escribe tu nombre..." autofocus/>
            <datalist id="listaNombre">
                <option label="Fran" value="Fran">
                <option label="Mario" value="Mario">
                <option label="Marcos" value="Marcos">
            </datalist>
        </div>

        <div class="bloque margin-bot">
            <label for="apellidos" class="ancho-label">Apellidos:</label>
            <input type="text" id="apellidos" name="apellidos" placeholder="escribe tus apellidos..."/>
        </div>

        <div id="divDni" class="bloque margin-bot">
            <label for="dni" class="ancho-label">DNI:</label>
            <input type="text" id="dni" name="dni"/>
        </div>

        <div class="bloque margin-bot">
            <p>Género:</p>

            <input type="radio" id="nina" name="genero" value="nina" checked>
            <label for="nina">Niña</label>
  
            <input type="radio" id="nino" name="genero" value="nino">
            <label for="nino">Niño</label>
  
            <input type="radio" id="noBinario" name="genero" value="noBinario">
            <label for="noBinario">No binario</label>

        </div>

        <div class="bloque margin-bot">
            <label for="email" class="ancho-label">Email:</label>
            <input type="email" id="email" name="email" placeholder="email..." required/>
        </div>

        <div class="bloque margin-bot">
            <label for="telefono" class="ancho-label">Teléfono:</label>
            <input type="tel" id="telefono" name="telefono">
        </div>


        <div class="bloque margin-bot">
            <label for="bondad" class="bloque">¿Cómo de bien te portaste este año? </label>
            <input type="range" name="bondad" id="bondad" min="0" max="100" step="1" value="0">
            <output class="bondad-output" for="bondad"></output>
        </div>

        <div class="bloque margin-bot">
            <label for="rangoDinero" class="bloque">¿Cuánto dinero se debería gastar Papá Noel?</label>
            <input type="range" id="rangoDinero" value="0">
            +<input type="number" id="dineroMin" class="min-width" value="2" readonly>
            =<output name="dineroFin" id="dineroFin" for="rangoDinero dineroMin"></output>
        </div>




        <div class="bloque margin-bot">
            <label for="tipoRegalo">Tipo de regalo:</label>
            <select name="tipoRegalo" id="tipoRegalo">
                <option value="juguete">Juguete</option> 
                <option value="golosinas" selected>Golosinas</option>
                <option value="deseo">Deseo</option>
            </select>
        </div>

        <div class="bloque margin-bot">
            <label for="textarea" class="bloque">Texto de la carta:</label>
            <textarea id="textarea" name="textarea" rows="10" cols="50" placeholder="Escribe tu carta..."></textarea>
        </div>

        <div id="errores" class="bloque margin-bot red">

        </div>
        

        <div class="text-right">
            <button id="enviar">Enviar</button>
        </div>


    </form>
    

    <script src="js/myFunctions.js"></script>

</body>
</html>

JAVASCRIPT

'use strict'

const formulario = document.querySelector("#formulario");
const bondad = document.querySelector("#bondad");
const bondadOutput = document.querySelector(".bondad-output");
const rangoDinero = document.querySelector("#rangoDinero");
const dineroMin = document.querySelector("#dineroMin");
const dineroFin = document.querySelector("#dineroFin");
const dni = document.querySelector("#dni");
const errores = document.querySelector("#errores");
const divDni = document.querySelector("#divDni");

const enviar = document.querySelector("#enviar");


const mensajesError = {
    dniLetra: "* Dni erroneo, la letra del DNI no se corresponde",
    dniFormato: "* Dni erroneo, formato no válido"

};

var formularioIsCorrect = true;




function valoraBondad(){
    //bondadOutput.value = bondad.value+"%";
    bondadOutput.textContent = bondad.value+"%";
}

function valoraDinero(){
    dineroFin.textContent = parseInt(rangoDinero.value)+parseInt(dineroMin.value);
}


function validaDni(dni) {
    let numero;
    let letr;
    let letra;
    let expresion_regular_dni;
   
    expresion_regular_dni = /^\d{8}[a-zA-Z]$/;
   
    if(expresion_regular_dni.test (dni) == true){
       numero = dni.substr(0,dni.length-1);
       letr = dni.substr(dni.length-1,1);
       numero = numero % 23;
       letra='TRWAGMYFPDXBNJZSQVHLCKET';
       letra=letra.substring(numero,numero+1);
      if (letra!=letr.toUpperCase()) {
         errores.innerHTML+=`<p>${mensajesError.dniErrorLetra}</p>`;
         divDni.classList.add("red");
         formularioIsCorrect = false;
       }else{
           divDni.classList.remove("red");
       }
    }else{
       errores.innerHTML+= `<p>${mensajesError.dniFormato}</p>`;
       divDni.classList.add("red");
       formularioIsCorrect = false;
    }
}

function validaFormulario(){

    validaDni(dni.value);

    if(formularioIsCorrect){
        formulario.submit();
        alert("El formulario se ha enviado correctamente");
    }

}



bondad.addEventListener("input", valoraBondad);
rangoDinero.addEventListener("input",valoraDinero);
enviar.addEventListener("click", validaFormulario);
1
  • ¿Por qué mejor no tener el botón Enviar desactivado por defecto y activarlo únicamente cuando las condiciones para enviar estén satisfechas? Aquí hay un ejemplo basado en el marcado de un checkbox, puedes usar la misma lógica, aunque las condiciones/elementos pueden cambiar.
    – A. Cedano
    Commented el 20 nov. 2020 a las 14:13

2 respuestas 2

1

El botón que tienes no le especificaste que tipo de botón es, por consiguiente asume que es de tipo submit. Este gatilla el evento submit del formulario el cual tu no estas controlado.

Puedes solucionarlo de dos formas:

1- Agregando el tipo de button al botón

<div class="text-right">
    <button id="enviar" type="button">Enviar</button>
</div>

2- o cambiando el evento click del botón y asignarle el evento submit al formulario

formulario.addEventListener("submit", validaFormulario);

Y a la funcion la modificas para que quede de esta manera

function validaFormulario(e){
    e.preventDefault();
    //Resto de tu código;
}

Con e.preventDefault() evitas que el evento submit se propague y lo "cancelas" y luego tu decides si enviarlo o no dependiendo de si el formulario esta correcto o no

Puedes leer mas en la documentación.

0

Mira el evento onsubmit; de esta forma evitas que el formulario se envíe.

De tal forma que tu formulario deberá ser:

<form onsubmit="return validar()" >
   <!-- Todo el contenido -->
</form>

La función (en este caso/ejemplo) validar debe en cualquier momento que se detenga un valor true o false; es decir (ejemplo):

function validar() {
   /* Tu lógica de validación; suponiendo */
   if (/* Comprobación 1 No Se Cumple */ ){
      return false;
   }
   else if (/* Comprobación debe retornar verdadero */)
   {
      return true;
   }
   /* Así sucecivamente sin olvidar el simple else */
   else
   {
      return true; // Aqui pongo true pero puede ser false según como corresponda
   }
   
}

Solo resta que tus validaciones las coloques como corresponde para devolver true o false. Espero te sirva.

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.