Buen día.
He estado tratando de hacer una validación en JS para que si se cumple la condición se procesen los datos en el servidor mediante PHP, si no, que el usuario corrija la información hasta que esté correcta para que llegue a PHP; sin embargo, a pesar de que JS hace correctamente la validación, cuando detecta un error lo anuncia, no obstante sí manda la información a PHP (osea sí se ejecuta el Submit). Quiero detener el submit antes de que mande los datoss.
Gracias.
Código HTML:
<form action="procesoTercerReporte.php" method="post" id="primeraSeccion">
<fieldset id="primeraSeccion">
<legend>Resultado de la Votación por Partido</legend>
<div id="votacionPartido">
<ul>
<li id="prueba">
<img src="imagenes/pan.jpg" width="30px" alt="Logo PAN">
<input type="number" name="pan" id="pan" min="0" max="<?php echo $_GET['totalBoletasRecibidas']; ?>" step="1" required>
</li>
<li id="prueba">
<img src="imagenes/pri.jpg" width="30px" alt="Logo PRI">
<input type="number" name="pri" id="pri" min="0" max="<?php echo $_GET['totalBoletasRecibidas']; ?>" step="1" required>
</li>
<li id="prueba">
<img src="imagenes/prd.jpg" width="30px" alt="Logo PRD">
<input type="number" name="prd" id="prd" min="0" max="<?php echo $_GET['totalBoletasRecibidas']; ?>" step="1" required>
</li>
<li id="prueba">
<img src="imagenes/pt.jpg" width="30px" alt="Logo PT">
<input type="number" name="pt" id="pt" min="0" max="<?php echo $_GET['totalBoletasRecibidas']; ?>" step="1" required>
</li>
<li id="prueba">
<img src="imagenes/pvem.jpg" width="30px" alt="Logo PVEM">
<input type="number" name="pvem" id="pvem" min="0" max="<?php echo $_GET['totalBoletasRecibidas']; ?>" step="1" required>
</li>
<li id="prueba">
<img src="imagenes/mc.jpg" width="30px" alt="Logo MC">
<input type="number" name="mc" id="mc" min="0" max="<?php echo $_GET['totalBoletasRecibidas']; ?>" step="1" required>
</li>
<li id="prueba">
<img src="imagenes/morena.jpg" width="30px" alt="Logo Morena">
<input type="number" name="morena" id="morena" min="0" max="<?php echo $_GET['totalBoletasRecibidas']; ?>" step="1" required>
</li>
</ul>
</div>
</fieldset>
<input type="hidden" name="usuario" value="<?php echo $_GET["usuario"]; ?>">
<input type="submit" value="Enviar" class="boton boton-verde">
</form>
Código JS:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("primeraSeccion").addEventListener('submit', validarFormulario);
});
function validarFormulario(evento) {
evento.preventDefault();
var pan = parseInt(document.getElementById('pan').value);
var pri = parseInt(document.getElementById('pri').value);
var prd = parseInt(document.getElementById('prd').value);
var pt = parseInt(document.getElementById('pt').value);
var pvem = parseInt(document.getElementById('pvem').value);
var mc = parseInt(document.getElementById('mc').value);
var morena = parseInt(document.getElementById('morena').value);
var suma = pan + pri + prd + pt + pvem + mc + morena;
var totalBoletasRecibidas = localStorage.getItem("totalBoletasRecibidas");
if (suma > totalBoletasRecibidas) {
alert("La suma de los votos no puede exceder de " + totalBoletasRecibidas + ". Favor de verificar.");
return;
} else {
this.submit();
};
};