Necesito que un formulario que cree valide si unos ciertos campos están completados, pero no sé si se debe usar un botón para enviar los formularios o un input-submit. Además de esto cuando le doy al botón se ejecuta el código PHP que envía los datos a la base de datos sin validar lo que escribí en JAVASCRIPT.
function validar(){
let nombre= document.getELementsByClassName('input')[0,1,2,3].value;
if (nombre==0) {
alert("hay campos vacios");
}else{
alert("1");
}
}
<?php
include "conectar.php";
$nombre=$_POST["nombre"];
$apellido=$_POST["apellido"];
$email=$_POST["email"];
$contraseña=$_POST["contraseña"];
$evaluacion="INSERT INTO multas(nombre, apellido, email, clave) VALUES('$nombre', '$apellido', '$email', '$contraseña')";
$resultado=mysqli_query($conexion, $evaluacion);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Blank App</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="contenedor">
<div class="contenedor_botones_inicio">
<button class="boton_inicio" id="boton_inicio1" onclick="saludo()">registrate</button><button class="boton_inicio" id="boton_inicio2">Ingresa</button>
</div>
<form action="procesar.php" method="post">
<h3>Registrate gratis</h3>
<input type="text" placeholder="Primer nombre*" class="texto" id="texto1" name="nombre">
<input type="text" placeholder="Segundo nombre*" class="texto" id="texto2" name="apellido"><br>
<input type="email" placeholder="Email*" class="texto" id="texto3" name="email"><br>
<input type="password" placeholder="Contraseña*" class="texto" id="texto4" name="contraseña"><br>
<button class="boton_enviar" onclick="validar()"></button>
</form>
</div>
<script src="comando.js"></script>
</body>
</html>
event.preventDefault()
y luego volver a enviar el evento de submit<script>
externa