Tengo un formulario con dos botones que apuntan al mismo archivo, pero según el botón que apriete el usuario se trata la información de una forma u otra. Básicamente, hay un botón para seleccionar los elementos de dos desplegables y otro para seleccionarlos aleatoriamente. Quiero implementar JS para que valide los datos en caso de que el usuario elija la primera opción, y asegurarme que tiene una opción seleccionada antes de enviar el formulario. Os adjunto el código a continuación.
Aparentemente, esto funciona bien, pero si se clica primero en el botón no aleatorio sin haber seleccionado los elementos (haciendo correr JS y mostrando el mensaje correctamente) luego al clicar el segundo botón (el aleatorio), que no debería hacer saltar el JS, también lo hace saltar. ¿Alguien me puede guiar hacia donde está mi error? No consigo verlo.
<form action="oficio.php" method="post" id="index">
<p> Nombre:
<input type = "text" id = "nombre" name = "nombrepj" required minlength="3" value = "<?php echo $Nombre;?>"/></p>
<p>Raza:
<select id = "raza_pj" name = "raza_pj">
<option value = "0" ></option>
<?php
if ($conexio) {$resultado=mysqli_query($conexio,"SELECT * FROM razas_bd_1");
while($consulta = mysqli_fetch_array($resultado)){
imprimir( "<option value='$consulta[0]'>" . $consulta['Raza'] . "</option>" );
}
}
?>
</select>
</p>
<p>Clase:
<select id = "clase_pj" name = "clase_pj">
<option value = "0" </option>
<?php
if ($conexio){
$consulta = "SELECT * FROM clase_bd_1";
$resultado=mysqli_query($conexio,$consulta);
if ($resultado = $conexio->query($consulta)){
while ($fila = $resultado->fetch_row()) {
imprimir ( "<option value='$fila[0]'>$fila[2]</option>" );
}
}
}
?>
</select>
</p>
<input type = "submit" name = "Empezar" id = "Empezar" value = "Empezar" onclick="validacionIndex()" />
<input type = "submit" name = "Dados" id = "Dados" value = "Dados"/>
</form>
<script language="javascript" type="text/javascript">
function validacionIndex(){
const form = document.getElementById("index");
const raza = document.getElementById("raza_pj");
const clase = document.getElementById("clase_pj");
form.addEventListener("submit", function(e){
if(raza.value == 0){
alert("texo 1.");
e.preventDefault();
}else if(clase.value == 0){
alert("texto 2.");
e.preventDefault();
}
})
}
</script>```