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);
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.